Angular - 手风琴 - 仅显示活动组答案

【问题标题】：Angular - accordion - show only active groupAngular - 手风琴 - 仅显示活动组
【发布时间】：2016-03-15 23:09:58
【问题描述】：

我正在使用 angular uib-accordion，我的手风琴组是使用 ng-repeat 动态填充的

<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>

我的问题是我怎样才能让这个手风琴只显示活动组而休息完全隐藏。另外活动组需要占据手风琴的整个高度并且切换应该回到正常状态（当然切换在 + 和 - 等按钮的帮助下发生。

【问题讨论】：

标签： javascript css angularjs angular-ui-bootstrap

【解决方案1】：

使用这个：

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

在您的控制器中添加以下方法：

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

然后在html中调用toggle方法：
ng-click="toggle()"

【讨论】：

【解决方案2】：

您可以将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

【讨论】：