我如何使用AngularJS ng-repeat重复此结构

时间:2013-01-08 18:12:04

标签: javascript angularjs

如何使用AngularJS ng-repeat重复此结构?

<div class=black></div>
<div class=white></div>
<div class=black></div>
<div class=white></div>

......等(不用标签包装)

3 个答案:

答案 0 :(得分:7)

如果您正在迭代一系列项目并需要交替的黑/白背景,那么您可以这样做:

<div ng-repeat="item in items" ng-class-odd="'black'" ng-class-even="'white'">
</div>

http://jsfiddle.net/fNCnr/1/

答案 1 :(得分:0)

<div ng-repeat="color in ['black','white']" class="{{color}}"></div>

输出:

<div ng-repeat="color in ['black','white']" class="black"></div>
<div ng-repeat="color in ['black','white']" class="white"></div>

或(更详细):

<div ng-repeat="color in ['black','white']" ng-class="color"></div>

输出:

<div ng-repeat="color in ['black','white']" ng-class="color" class="ng-scope black"></div>
<div ng-repeat="color in ['black','white']" ng-class="color" class="ng-scope white"></div>

答案 2 :(得分:0)

在控制器中定义颜色列表:

$scope.colors = ['black', 'white', 'black', 'white', 'black', 'white', ...];

HTML:

<div ng-repeat="color in colors" ng-class="color"></div>

请参阅jsFiddle