angularJS 中html 标签绑定样式,ng-class的使用

样式代码：

.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(){…}的效果，