Блог

В моей разметке я использую 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'
    }...
  

Попробуйте это

 <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>
  

Если у вас нет conditional логики, вы можете в принципе просто использовать сам traditional 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>
  

Здесь вы передаете, {{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 binding ссылки на документ

<i class="fa {{::social.iconClass}}">
Это наиболее эффективный способ, поскольку наблюдатели не создаются.