在使用ng-repeat指令时如何为元素应用CSS类？

嘿，我看你在AngularJS的ng-repeat循环里遇到了CSS类应用的困惑，刚好对这个场景挺熟悉的，给你几个实用的解决方案：

首先看你的代码，目前summary-card类是固定加在ng-repeat的外层<div>上的，但如果想根据cardData的属性（比如uniqueCardsDataFlag）动态添加不同的类，或者把类应用到模板内部的元素上，AngularJS的ng-class指令就能搞定。

场景1：给ng-repeat的外层容器动态加类 #

如果想给每个循环出来的外层容器，根据cardData.uniqueCardsDataFlag的值添加不同的类，直接在外层div上用ng-class就行：

<div class="summary-card" 
     ng-repeat="cardData in summaryCardsCtrl.summaryDetails"
     ng-class="{ 'unique-card': cardData.uniqueCardsDataFlag, 'analytics-card': !cardData.uniqueCardsDataFlag }">
  <div ng-switch ="cardData.uniqueCardsDataFlag">
    <div ng-switch-when=true>
      <div ng-include="'src/templates/my-unique-card.html'"></div>
    </div>
    <div ng-switch-default>
      <div ng-include="'src/templates/my-analytics-card.html'"></div>
    </div>
  </div>
</div>

这段代码里，ng-class用了对象语法：当cardData.uniqueCardsDataFlag为true时，会给外层div加上unique-card类；为false时则加上analytics-card类，同时原有的summary-card类会被保留，相当于多个类叠加。

场景2：给模板内的元素应用类 #

如果你的需求是把类应用到ng-include加载的模板内部元素上，有两种简单的方式：

• 方式一：直接继承父作用域变量
  因为ng-repeat的作用域会传递给ng-include的模板，所以模板里可以直接用cardData变量。比如在my-unique-card.html里：

<div class="card-inner" ng-class="{'special-unique-style': cardData.uniqueCardsDataFlag}">
  <!-- 这里放你的模板内容 -->
</div>

• 方式二：通过onload传递变量（适合复杂场景）
  如果担心作用域嵌套带来的问题，也可以通过ng-include的onload属性把变量传递到模板里：

<div ng-switch-when=true>
  <div ng-include="'src/templates/my-unique-card.html'" onload="currentCard = cardData"></div>
</div>

然后在模板里用currentCard变量：

<div class="card-inner" ng-class="{'special-unique-style': currentCard.uniqueCardsDataFlag}">
  <!-- 模板内容 -->
</div>

另外，如果你想让每个模板的根元素都带上summary-card类，也可以把这个类从外层div移到模板的根元素上，这样每个模板的根元素既有基础类，又能添加各自的专属样式，灵活性更高。

内容的提问来源于stack exchange，提问作者StrugglingCoder