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

Question

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

更新:使用 Amine 的响应，点击的标题会按应有的方式出现字形向下。但是当折叠并在外面点击时，字形在设置索引时保持向下，实际上需要在折叠时再次向上。再次单击该项目时，如何再次将 $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>

在我的 Controller 中我有:

$scope.state = { selected: undefined };

Answer 1

当您单击该元素时，您并没有删除 glyphicon-chevron-down 类。您最终会得到一个同时具有两个类的元素；将应用最后出现的任何 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 绑定(bind)，因为它已经由 accordion-group 处理)。