Question

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

这是视图

       <script>
       function init() { 

       var accelerometer = document.getElementById('accelerometer');
       if(window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', function(event) {
        var x = parseInt(event.accelerationIncludingGravity.x);

        var y = parseInt(event.accelerationIncludingGravity.y);

        var z = parseInt(event.accelerationIncludingGravity.z);

        var acce = 'Acceleration:<br />';
        acce += 'x: ' + x +'<br />y: ' + y + '<br />z: ' + z + '<br />'+'<input type=\"reset\" value=\"reset\" onclick=\"action here\"/>'+'<br/>'+'<button>Stop</button>';

        accelerometer.innerHTML = acce;
        });
        }
        }
        </script>

在控制器中我有这个。

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

我尝试使用ng-class指令来评估item.opened是true还是false，但是当关闭选项卡因为另一个选项卡关闭它们时，item.opened将不会更新。

事实上，我已经研究过用$ watch我可以“观察”变化并运行一个函数，我看到当我点击一个标签时，添加了一个css类'.panel-open'，但怎么能我注意到为了更新i类元素而添加了css类的div元素。

感谢。

Answer 1

Well, you basically want to watch for any changes in your portfolios array, when all of the opened properties are false, trigger a value bound to $scope that will change a class, preferably using something like ng-class (this will also work using ng-style).

Because you watch an array, you should using $watchCollection instead of plain old $watch

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

Array.prototype.every will return true if all the items in an array return true on a predicate function, in this case, all of the .opened properties are false.

Then setup something like

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

Here's a plunker

Your question was kind of hard to understand, comment if I didn't cover something.

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

1 个答案: