javascript - 使用 Angular ng-if 旋转样式

Question

仍在学习 Angular，但在旋转样式时遇到问题。最终，我希望第一条记录是蓝色的，第二条记录是白色的，第三条记录是蓝色的，第四条记录是白色的，等等......

现在我的订单是(不正确): 记录 1 蓝色 记录3蓝色 记录2白 记录4白

有什么想法可能会出现问题吗？

HTML

<div id="dashboard" style="width: 1100px;" ng-controller="controller4">

<div class="blue" ng-repeat="metrics in dashboard" ng-if="($index % 2 == 0)">
 <div align="center">
  <h3>{[{metrics.value}]}</h3>
  <span class=dashboardtext>{[{metrics.name}]}</span>
 </div>
</div>

<div class="white" ng-repeat="metrics in dashboard" ng-if="($index % 2 != 0)">
 <div align="center">
  <h4>{[{metrics.value}]}</h4>
  <span class=dashboardtext>{[{metrics.name}]}</span>
 </div>
</div>


</div>

JS

var dashboard = [

{

value: 15, 
name: "Total Completed"

},


{

value: 1200, 
name: "Additional Widgets Sold"

},


{

value: 16, 
name: "Projects"

},

{

 value: 5, 
 name: "Average Days"

 }


];




myApp.controller('controller4', function($scope) {


$scope.dashboard = dashboard;



});

Answer 1

ng-class-even 和 ng-class-odd 指令完全满足您的需求。

ng-class-even -> Add a class value to DOM classList object when $index is even

ng-class-odd -> Add a class value to DOM classList object when $index is odd

标记

<div ng-class="'blue'" ng-class-odd="'white'" ng-repeat="metrics in dashboard">
 <div align="center">
  <h3>{[{metrics.value}]}</h3>
  <span class=dashboardtext>{[{metrics.name}]}</span>
 </div>
</div>