[英]Rotate Styles using Angular ng-if
Still learning angular, but having issues rotating styles. 仍在学习有角度的知识,但是在旋转样式方面遇到问题。 Ultimately, I want the first record to be blue, the second to be white, the third blue, the fourth white, etc...
最终,我希望第一条记录是蓝色,第二条记录是白色,第三条蓝色,第四条白色,等等。
Right now my order is (incorrect): Record 1 Blue Record 3 blue Record 2 white Record 4 white 现在我的订单是(不正确的):记录1蓝色记录3蓝色记录2白色记录4白色
Any ideas what could be the issues? 任何想法可能是什么问题?
HTML 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 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
directive perfectly suits your need. ng-class-even
和ng-class-odd
指令非常适合您的需求。
ng-class-even -> Add a class value to DOM
classList
object when$index
is evenng-class-
classList
当$index
为偶数时,向DOMclassList
对象添加一个类值ng-class-odd -> Add a class value to DOM
classList
object when$index
is oddng-class-
classList
当$index
为奇数时,向DOMclassList
对象添加一个类值
Markup 标记
<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>
For simple even/odd, you can use the ng-class-even and ng-class-odd attributes. 对于简单的偶数/奇数,可以使用ng-class-even和ng-class-odd属性。 If you have a more complex situation with more values, use the below solution.
如果您遇到的情况更复杂,值更多,请使用以下解决方案。
Create a filter and use it in the class attribute. 创建一个过滤器并在class属性中使用它。
app.filter("classFilter", function () {
return function (input) {
var $class = "";
switch(input % 2){
case 0:
$class = "blue";
break;
case 1:
$class = "white";
break;
}
return $class;
}
});
Then in your HTML, you would have 然后在您的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.