在angular js中将表达式用作ng-class

Question

我有一个无序列表，其中我希望每个li都具有不同的类，这将是动态的。

我的代码是

$scope.className = ['clr1','clr2','clr3','clr4','clr5'];

我的HTML：

  <div>
        <ul>
         <li  ng-repeat="item in mainitem"  ng-style="{color: color[$index]}" >
              <span  ng-class="{className [$index]}">{{ item.name}}</span>  // At this line I ahve added dynamic class but its not working
          </li>
        </ul>
   </div>

这不是根据类名数组应用的类！

这段代码有什么问题吗？ 感谢您的帮助！

Answer 1

您可以使用[]代替{}

 <div>
        <ul>
         <li  ng-repeat="item in mainitem"  ng-style="{color: color[$index]}" >
              <span  ng-class="[className[$index]]">{{ item.name}}</span>  
          </li>
        </ul>
   </div>

例如工作，请参阅此Codepen Codepen

Answer 2

由于代码已发布在问题中，因此您在评估类名称时缺少左括号

<span  ng-class="{className [$index]}">{{ item.name}}</span>

应该

<span  ng-class="{{className [$index]}">{{ item.name}}</span>  

当它不评估时，您将最终没有任何课程