My Little World

angular样式绑定ng-class

ng-class命令可用于绑定不同的样式
使用方法即先在js中,定义样式集合
$scope.STATUS_NAME = [
{‘labelClass’: ‘label1’},
{‘labelClass’: ‘label2’},
{‘labelClass’: ‘label3’},
{‘labelClass’: ‘label4’}
];
对绑定对象赋值
angular.forEach($scope.data, function(data){
//对数组中每一项,根据status属性赋给labelclass属性样式集合中的值
data.labelClass = $scope.STATUS_NAME[data.status].labelClass;
});
在html中定义不同的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
.label1{
background-color:#87CEFA
}
.label2{
background-color:#90EE90
}
.label3{
background-color:#d2cd93
}
.label4{
background-color:#D3D3D3
}
</style>

在html中使用

1
2
3
<tr role="row" ng-repeat="item in data track by $index">
<td><span class="label" ng-class="item.labelClass">{{item.status_desc}}</span></td>
</tr>