样式代码:
.default{
color:black;
}
.style1{
display:block;
background-color:red;
}
.style2{
font-size:22px;
}
我们可以像一般的HTML那样,直接给定类class,绑定样式
<div>
<span class="default">{{name}}</span>
</div>
判定启用那个样式true/false,使用angular指令ng-class:
<div>
<span ng-class="{true:'default',false:'style1'}
[name=='angular']">{{name}}
</span>
</div>
判断name==’angular’,为true选用default样式,false 用style 1样式,相当于if{…}else{..}
判断跟在属性后,与其他的无关,只在乎他自己的value值是true/false:
<div>
<span ng-class="{'default':name=='angular',
'style1':name=='hello',
'style2':name!='angular'&&name!='hello'}">
{{name}}
</span>
</div>
name值的不同应用的样式不同,应用样式也可叠加。相当于while(){…}的效果,