使用角度 ng-if 旋转样式

Rotate Styles using Angular ng-if

本文关键字：旋转 样式 ng-if      更新时间：2023-09-26

仍在学习角度，但旋转样式有问题。 最终，我希望第一张唱片是蓝色的，第二张是白色的，第三张是蓝色的，第四张是白色的，等等......

现在我的订单是（不正确）：记录 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;

});

ng-class-even & ng-class-odd指令完全符合您的需求。

ng-class-even -> 在$index时向 DOM classList对象添加一个类值 甚至

ng-class-odd -> 在以下情况下向 DOM classList对象添加一个类值 $index很奇怪

标记 

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

对于简单的偶数/奇数，您可以使用 ng-class-even 和 ng-class-odd 属性。如果具有更多值的更复杂的情况，请使用以下解决方案。

创建一个过滤器并在类属性中使用它。

app.filter("classFilter", function () {
            return function (input) {
                var $class = "";
                switch(input % 2){
                    case 0:
                        $class = "blue";
                        break;
                    case 1:
                        $class = "white";
                        break;
                }
                return $class;
            }
        });

然后在您的 HTML 中，您将拥有

<div class="$index | classFilter" ng-repeat="metrics in dashboard">
 <div align="center">
  <h3>{[{metrics.value}]}</h3>
  <span class=dashboardtext>{[{metrics.name}]}</span>
 </div>
</div>
相关文章：