2016-03-15 2 views
0

Я использую угловую UIB-гармошку и мой аккордеон-группу заполняемая динамически с помощью нг-повторить, как этогоУгловой - аккордеон - показать только активной группу

<uib-accordion id="customer-details"> 
<uib-accordion-group ng-repeat="task in ctrl.results | toArray |  orderBy:ctrl.orderByFunction" ng-click="ctrl.select(task, $index)"> 
    <uib-accordion-heading > 
    </uib-accordion-heading> 
<uib-accordion-group> 

мой вопрос, как я могу сделать это баян, чтобы показать только активная группа и отдых, чтобы скрыть полностью. Также активной группе необходимо взять всю высоту аккордеона, а переключение должно вернуться к нормальному состоянию (конечно, переключение происходит с помощью кнопки типа + и -).

ответ

0

Вы можете добавить ng-if директиву повторенного элемента группы (я предполагаю, что каждая задача имеет active свойство):

<uib-accordion-group ng-repeat="task in ctrl.results | toArray | orderBy:ctrl.orderByFunction" 
    ng-click="ctrl.select(task, $index)" 
    ng-if="task.active"> 
    <uib-accordion-heading > 
    </uib-accordion-heading> 
<uib-accordion-group> 

Вот ng-if документация: https://docs.angularjs.org/api/ng/directive/ngIf

1

использовать это:

<ul data-ui-sref-active="active" > ... </ul> 

Добавить контроллер в ваш контроллер:

$scope.opened = false; 
$scope.toggle = function() { 
    $scope.opened = !($scope.opened); 
}; 

Затем вызовите метод toggle в HTML:
ng-click="toggle()"

Смежные вопросы