AngularJS：ng-repeatでクラスを追加する方法

Question

私のマークアップでは、各li要素にテキストを追加するためにng-repeatを使用していますが、クラスを追加したい（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> 

それは私のコントローラで

を働いていない..but私が持っている：あなたが持っている場合は

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"]となります。

次のいずれかを使用することができますng-classディレクティブで

1. を。

   a。 ng-class="expression"

   b。 ::をone time bindingdoc link

   するためのものである：Interpolation [{{expression}}]

   class="{{expression}}"

注でclass="ng-class: expression;"