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

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

это вид

<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», но как я могу это увидеть? div, что класс css был добавлен для обновления элементов класса i.

Спасибо.


angular-ui-bootstrap angular-bootstrap
person vnv_nation    schedule 31.08.2016    source источник
comment
вы можете использовать $watch, который принимает функцию, и эта функция будет проверять, закрыты ли все панели, можете ли вы опубликовать то, что вы сделали до сих пор?   -  person svarog    schedule 31.08.2016
comment
Спасибо братан, я обновил вопрос с кодом   -  person vnv_nation    schedule 31.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

Ну, в основном вы хотите следить за любыми изменениями в вашем массиве 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 вернет значение true, если все элементы массива вернут значение true для функции-предиката, в этом случае все свойства .opened имеют значение false.

Затем настройте что-то вроде

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

Вот плункер

  • Ваш вопрос был трудным для понимания, прокомментируйте, если я что-то не учел.
person svarog    schedule 31.08.2016
comment
Спасибо за вашу помощь, братан, очень признателен, в итоге я использовал jQuery. Я не знаю, хороший ли это подход, я прикрепил прослушиватель кликов к элементу вкладки, а затем с помощью .each() я проверил, есть ли у элементов открытая панель класс, и если они это сделают, я удалил класс fa-plus-circle, если они этого не сделают, я добавил класс fa-minus-cirlce, tbh, я все еще изучаю angularJs - person vnv_nation; 31.08.2016
comment
я предпочел использовать .every чем-то вроде .each, потому что every ломается, когда находит значение, которое не возвращает true в функции. jquery в порядке, но ui-bootstrap его не использует, вариант использования также довольно прост, я действительно сомневаюсь, что вам это понадобится ТОЛЬКО для этого. в любом случае, не забудьте проголосовать, если вы нашли этот ответ полезным. - person svarog; 31.08.2016