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