Как изменить класс css, когда все вкладки закрыты в ui.bootstrap.accordion

Question

Как изменить класс css, когда все вкладки в ui.bootstrap.accordion закрыты, например, если вкладки были закрыты, потому что другая вкладка вызвало их закрытие, выражение ng-class не будет работать и не изменит значок.

Это мнение

<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} 
]; 

Я пытался использовать директиву нг-класс для того, чтобы оценить, если item.opened был истинным или ложным, но когда вкладки были закрыты, потому что другая вкладка закрыла их, в item.opened обыкновение обновления.

Действительно, я исследовал, что с помощью $ watch я могу «наблюдать» за изменениями и запускать функцию, я видел, что, когда я нажимаю на одну вкладку, добавлен класс css .panel-open'is, но как могу ли я посмотреть, что элемент div, который был добавлен в класс css, чтобы обновить элементы класса i.

Спасибо.

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; 
}) 

Array.prototype.every возвращает истину, если все элементы массива возвращает истину в функции предиката, в этом случае все свойства .opened являются ложными.

Тогда установка что-то вроде

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

Here's a plunker

• Ваш вопрос был отчасти трудно понять, комментарий, если я не покрывал что-то.