关于AngularJS的ng-class

关于AngularJS的ng-class比较推荐的有两种方式 1.字符串数组 2.对象key/value

1.<div ng-class="{true:'style1',false:'style2'}[value]"></div>

如果value的值为true则div的样式为类名是style1的样式，false同样，缺点是只能有一

个样式

2.<div ng-class="{'key1':value1,'key2':value2,'key3':value3}"></div>

如果value的值为true则为div添加样式为类名是key的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<style>
.key1 {
    color:yellow;
    background-color:lightblue;
    padding:20px;
    font-family:"Courier New";
}
.key2 {
    background-color:coral;
    padding:40px;
    font-family:Verdana;
}
   .key3 {
    background-color:pink;
       border:1px solid red;
       width:300px;
    padding:40px;
}
</style>
</head>
<body ng-app="">

<p>选择一个类:</p>


<input type="text" ng-model="x">
<input type="text" ng-model="y">
<input type="text" ng-model="z">
<div ng-class="{key1:x>2,key2:y==1,key3:z==0}">
<h1>Welcome Home!</h1>
<p>I like it!</p>
   <p>最终的结果应该是 color:yellow; background-color:pink;
       border:1px solid red;
       width:300px;
    padding:40px; font-family:Verdana;</p>
</div>

</body>
</html>

自己写的一个小例子，方便理解^_^

关于AngularJS的ng-class

关于AngularJS的ng-class比较推荐的有两种方式 1.字符串数组 2.对象key/value

相关推荐