AngularJS：如何使用ng-repeat添加一個類

Question

在我的標記中，我使用ng-repeat向每個li元素添加文本，另外我還想添加一個類（除了「fa」類）。到目前爲止，我這樣做：

<ul class='social-icons' ng-repeat="social in myCtrl.socialArr"> 
     <li><i class="fa" ng-class={{social.iconClass}}></i><label>{{social.label}}</label></li> 
</ul> 

..但它不是在我的控制工作

我：

self.socialArr = [ 
    { 
     label: 'Facebook', 
     url: 'facebook.com/', 
     iconClass: 'fa-facebook' 
    },{ 
     label: 'Twitter', 
     url: 'twitter.com/', 
     iconClass: 'fa-twitter' 
    }... 

Answer 1

試試這個

<ul class='social-icons'> 
    <li ng-repeat="social in myCtrl.socialArr"> 
    <i class="fa" ng-class="social.iconClass"></i> 
    <label>{{social.label}}</label> 
    </li> 
</ul> 

Answer 2

如果你有沒有conditional的邏輯，你可以基本上只使用傳統的class本身，這會提高性能，因爲ng-class指令將不必要地觸發digest週期，在您的情況下它根本不需要。

<ul class='social-icons' ng-repeat="social in myCtrl.socialArr"> 
<li> 
    <i class="fa" class={{social.iconClass}}></i> 
     <label>{{social.label}}</label> 
</li> 
</ul> 

Answer 3

<i class="fa {{::social.iconClass}}">
這是最高效的方式，因爲沒有創建觀察。

Answer 4

在這裏，您通過{{expression}}其評估爲string。但是ng-class期望expression [ng-class="expression"]。

您可以使用任何如下：

1. 隨着ng-class指令。

   a。 ng-class="expression"

   b。 class="ng-class: expression;"

2. Interpolation隨着[{{expression}}]

   class="{{expression}}"

注：::爲one time bindingdoc link