如何使用AngularJS ng-repeat來重複此結構

Question

如何使用AngularJS ng-repeat來重複此結構？

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

...等（不帶標籤包裹）

Answer 1

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

Answer 2

在你的控制器，你定義的顏色列表：

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

HTML：

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

見jsFiddle。

Answer 3

如果你遍歷項目的數組，需要交替的黑/白背景，那麼你可以做這樣的：

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

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