将类添加到选定的 ng-repeat 列表元素答案

【问题标题】：Add class to selected ng-repeat list elements将类添加到选定的 ng-repeat 列表元素
【发布时间】：2016-01-26 18:36:56
【问题描述】：

嘿，我在模板中使用 ng-repeat 循环遍历数组。该列表吐出 9 个列表元素，我想更改所选列表元素的背景颜色，但我想以一种可以选择多个列表元素以及具有不同背景颜色的所选元素的颜色的方式进行操作。最初，我将 $event 传递给列表元素上的 click 函数，并向 event.target 添加了一个类，但这会将类放在所有列表元素上，而不是选定的元素上。

<ul>
            <li class="info-items"
                ng-repeat="card in config.cards"
                ng-class="{'error-border': emptyCardsArray}">
                <div class="inner-text"
                     ng-model="userSelection.cards"
                     ng-click="addCard(card.name, $event)">{{card.name}}{{$index + 1}}</div>
            </li>
        </ul>

HTML：

$(event.target).addClass('active.cards');

JS：

不幸的是，我重复的列表没有唯一 ID，否则我会传入 ID 并创建一个条件来检查所选项目是否有一个并应用该类。

【问题讨论】：

你为什么不用ng-class？
该指令处理多项选择。 jtrussell.github.io/angular-selection-model
使用 ng-class 将类应用于所有列表元素，而不仅仅是选定的 @Artem
检查Plunk
我收到一个 selected is not defined 错误...可能是因为我从 http 调用中获取数组？

标签： angularjs angularjs-ng-repeat addclass

【解决方案1】：

为此简单地使用ng-class 是一种更好的做法。

<ul>
  <li class="info-items"
      ng-repeat="card in config.cards"
      ng-class="{'error-border': emptyCardsArray}">
      <div class="inner-text"
           ng-model="userSelection.cards"
           ng-class="active.cards">{{card.name}}{{$index + 1}}
      </div>
   </li>
</ul>

【讨论】：