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

在这里，您将{{expression}}传递给string。但ng-class期待expression [ng-class="expression"]。

您可以使用以下任何一项：

使用ng-class指令。

一个。 ng-class="expression"

湾class="ng-class: expression;"
Interpolation [{{expression}}]

class="{{expression}}"

注意：::适用于one time binding doc link

Answer 4

<i class="fa {{::social.iconClass}}">
这是最高效的方式，因为没有创建观察者。

AngularJS：如何使用ng-repeat

4 个答案: