在 ui.bootstrap.accordion 中关闭所有选项卡时如何更改 CSS 类

Question

当 ui.bootstrap.accordion 中的所有选项卡都关闭时，如何更改 css 类，例如，如果选项卡因为另一个选项卡触发它们关闭而关闭，则 ng-class 表达式将不会运行并获胜' t 改变图标。

这是风景

<uib-accordion>
            <uib-accordion-group ng-repeat="item in portafolio | orderBy : 'order' " ng-click="item.opened=!item.opened">
                <uib-accordion-heading>
                    <i class="fa fa-lg" ng-class="(item.opened === true) ? 'fa-minus-circle':'fa-plus-circle'"></i>
                        <span>{{item.name}}</span>
                    <i class="pull-right fa fa-lg" ng-class="{'fa-caret-down': true === item.opened, 'fa-caret-right': false === item.opened}"></i>
                </uib-accordion-heading>
                <div ng-include="'modules/widgets/portafolio/tpl/'+item.type+'.html'"></div>
            </uib-accordion-group>
        </uib-accordion>

在控制器中我有这个。

$scope.portfolio = [
  { type: 'Balance', order:1, name:'current balance', opened: false},
  { type: 'Credits', order:2, name:'Credits', opened: false},
  { type: 'Investments', order:3, name:'Investments', opened: false}
];

我尝试使用 ng-class 指令来评估 item.opened 是真还是假，但是当标签因为另一个标签关闭而关闭时，item.opened 不会更新。

确实，我研究过使用 $watch 我可以“监视”更改并运行一个函数，我看到当我单击一个选项卡时，会添加一个 css 类 '.panel-open'，但是如何我观察了添加了 css 类以更新 i 类元素的 div 元素。

谢谢。

Answer 1

好吧，你基本上想观察你的portfolios数组中的任何变化，当所有opened属性都是false时，触发一个绑定到$scope的值，这将改变一个类，最好使用一些东西比如ng-class（这也可以使用ng-style）。

因为你看的是一个数组，你应该使用$watchCollection而不是普通的旧$watch

$scope.$watchCollection(function() {
    return $scope.portfolio.every((item) => {
        return item.opened === false; 
    })
  }, function(newValue, oldValue) {
      $scope.value = newValue;
})

如果数组中的所有项在谓词函数上都返回 true，Array.prototype.every 将返回 true，在这种情况下，所有 .opened 属性都是 false。

然后设置类似的东西

ng-class="{'btn-primary': value, 'btn-success': !value}"

Here's a plunker

• 您的问题有点难以理解，如果我没有涵盖某些内容，请发表评论。