UI Bootstrap аккордеон - стрелка вниз внутри ng-repeat

Question

UI Bootstrap аккордеон - стрелка вниз внутри ng-repeat

0

Я хочу, чтобы моя стрелка указывала вниз, когда аккордеон открыт. Когда я использую ng-repeat is-open = "status.open" применяется к каждому аккордеон. Это создает проблему, когда is-open = "status.open" применяется ко всем аккордеонам. Мне нужен каждый аккордеон, чтобы иметь уникальную ценность. EG: open1, open2, open3

Как получить мой ng-repeat, чтобы добавить уникальное значение для каждого аккордеона?

Plunker: http://plnkr.co/edit/veFWTHuWIn2YpfgHqGMC?p=preview

<div uib-accordion-group class="panel-default" ng-repeat="group in groups" is-open="status.open">
  <uib-accordion-heading>
    {{group.title}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
  </uib-accordion-heading>
  {{group.content}}
</div>

simple 30 июль 2016, в 02:32

Источник

1

Вы пробовали вместо этого is-open = "status.open [$ index]"? ( plnkr.co/edit/YVD2c9gzjnwzwO7XeWiZ?p=preview )
Laloutre 30 июль 2016, в 00:06
0

Мне нравится, как это читается в коде. Я использовал это для моего окончательного решения.
simple 03 авг. 2016, в 15:37

Теги:

javascript

angularjs

angular-ui-bootstrap

1 ответ

Ещё вопросы

Вы пробовали вместо этого is-open = "status.open [$ index]"? ( plnkr.co/edit/YVD2c9gzjnwzwO7XeWiZ?p=preview )
Мне нравится, как это читается в коде. Я использовал это для моего окончательного решения.

Rishabh · Accepted Answer · 2016-07-30T03-07-00.000Z

Вы используете одну и ту же переменную статуса (status.open) для статуса открытия/закрытия всех групп аккордеона. Поэтому, если кто-то открыт, другие будут открываться, потому что статус тот же. Чтобы решить эту проблему, сделайте переменную статуса частью свойства объекта ng-repeat.

<div uib-accordion-group class="panel-default" ng-repeat="group in groups" is-open="group.open">
  <uib-accordion-heading>
    {{group.title}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': group.open, 'glyphicon-chevron-right': !group.open}"></i>
  </uib-accordion-heading>
  {{group.content}}
</div>

Вот обновленный плункер.

Или, как предложил Laloutre в комментариях, вы можете использовать is-open = "status.open [$ index]", если вы не хотите, чтобы переменная статуса была как свойство объекта ng-repeat.