angular 的ng-class

最新推荐文章于 2023-12-21 21:55:31 发布

Original-Heart

最新推荐文章于 2023-12-21 21:55:31 发布

阅读量653

点赞数 1

分类专栏： Angular 文章标签： angular ng-class

本文链接：https://blog.csdn.net/sunshineLuChen/article/details/67639266

版权

Angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css：
.color-red{background-color:red;}
.color-blue{background-color:blue;}
.color-yellow{background-color:yellow;}
.color-green{background-color:green;}
.color-yanc{background-color:cyan;}

html：
<body ng-app="myApp">
<div ng-controller="myCtrl">

<p>方式一：</p>
<ul>
<li ng-repeat="item in data" class="{{item.index==0?'color-red':'color-blue'}}">{{item.name}}</li>
</ul>

<p>方式二(分页且当后台数据以一页一页方式传过来的时候，会失效)：</p>
<ul>
<li ng-repeat="item in data" ng-class="{10:'color-yellow',20:'color-green',30:'color-blue'}[{{item.num}}]">{{item.name}}</li>
</ul>

<p>方式三(分页时不影响)：</p>
<ul>
<li ng-repeat="item in data" ng-class="{'color-yellow':item.num==10,'color-green':item.num==20,'color-blue':item.num==30,}">{{item.name}}</li>
</ul>
</div>
</body>

数据：
<script src="https://cdn.bootcss.com/angular.js/1.4.4/angular.js"></script>
<script>
angular.module("myApp",[]).controller("myCtrl",function($scope)
{
$scope.data = [
{
name :"小明",
sex :"男",
index :0,
num :10
},
{
name :"小红",
sex :"男",
index :0,
num :20
},
{
name :"小花",
sex :"女",
index :1,
num :30
}
]
})
</script>