AngularJs 在 ng-repeat 中设置单个单击元素的样式

Question

我有一个可折叠的手风琴，使用 ng-repeat 呈现其选项。在右边有一个向下的字形。单击并展开作业后，此字形图标应朝上。

Update：使用 Amine 的响应，点击的 header 得到一个 glyphicon-down，这是应该的。但是当折叠并在外面点击时，字形在设置索引时保持向下，实际上需要在折叠时再次向上。再次单击该项目时，如何再次将 $index 设置为 undefined ？

我的代码：

<div class="col span_2_of_3">
        <div ng-repeat="item in jobs">
            <accordion>
                <accordion-group ng-click="state.selected = $index">
                    <accordion-heading>
                        <h2>
                            "{{item.title}}"
                            <i class="pull-right glyphicon "
    ng-class="{'glyphicon-chevron-up': $index == state.selected,
          'glyphicon-chevron-down': $index != state.selected }"
                            ng-click="state.selected = $index"
                            ></i>
                        </h2>
                    </accordion-heading>
                    {{item.description}}
                </accordion-group>
            </accordion>
        </div>
    </div>

在我的控制器中我有：

$scope.state = { selected: undefined };

Answer 1

当您单击该元素时，您并没有删除 glyphicon-chevron-down class。您最终得到一个同时具有 classes 的元素；无论 CSS 最后出现的规则都会被应用。

试试这个：

<i class="pull-right glyphicon " 
   ng-class="{'glyphicon-chevron-up': $index == state.selected,
              'glyphicon-chevron-down': $index != state.selected }"></i>

Here 是一个显示解决方案的 fiddle（请注意，我已经删除了图标上的 ng-click 绑定，因为 accordion-group 已经处理了）。

AngularJs 在 ng-repeat 中设置单个单击元素的样式

AngularJs styling a single clicked element within an ng-repeat

javascript

angularjs

angularjs-ng-repeat

ng-class