Question

我想用ng-repeat增加类序列。我的要求符合

<div class="c1">image1</div>
<div class="c2">image2</div>
<div class="c3">image3</div>
......................
<div class="cN">imageN</div>

我试图将其减少为

<div ng-class="{'c':{{imgNo}}}" ng-repeat="imgNo in imgNos">Image{{imgNo}}</div>

或

<div ng-class="{'c[$index]':isTrue}" ng-repeat="imgNo in imgNos">Image{{imgNo}}</div>

请以正确的方式帮助我。感谢

Answer 1

试试这样。

＆＃13;

angular.module('app',[])
.controller('ctrl',function($scope){
    $scope.List = [
        {Name : '1'},
        {Name : '2'},
        {Name : '3'},
        {Name : '4'},
        {Name : '5'}
    ];
    
   
});

＆＃13;

.c0{
  color:red;
  }

.c1{
  color:blue;
  }

.c2{
  color:green;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="category in List" ng-class="'c'+{{$index}}">
       {{category.Name}}
    </li>
  </ul>
</div>

＆＃13;

Answer 2

试试这个

<div class="c{{imgNo}}" ng-repeat="imgNo in ImgNos">Image{{imgNo}}</div>

的 DEMO

Answer 3

您不需要在此处指定或使用$index，因为您已经拥有imgNo字段并且在div文本中使用，您还可以追加类中的相同名称：

<div class="c{{imgNo}}" ng-repeat="imgNo in ImgNos">Image{{imgNo}}</div>

Answer 4

您可以使用

<div class="c{{imgNo}}" ng-repeat="imgNo in ImgNos">Image{{imgNo}}</div>

使用ng-repeat将索引传递给ng-class

4 个答案: