angular学习

[ngClass] = 

三种类型

第一种 三元判断

"item.isExpanded ? 'expand-on' : 'expand-off'"

值为真，显示前一个expand-on的样式， 值为假。显示expand-off的样式

第二种 json字符串

"{'myaccount_button_active ':vaildStatus,'myaccount_button_deactivate':!vaildStatus,'start':true}"

json字符串是 ，值为true的生效。 如例子中 start始终有该class样式，其余两个要根据vaildStatus的值来决定显示哪个的class样式

第三种 数组

"['style1', 'style2', 'style3']"

数组中的每一个样式都会添加到 class中

也可以和ngmodel绑定

<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>     <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)     <br>     <input type="checkbox" ng-model="important"> important (apply "bold" class)     <br>     <input type="checkbox" ng-model="error"> error (apply "red" class)

或者

<p ng-class="[style1, style2, style3]">Using Array Syntax</p>

    <input ng-model="style1" placeholder="Type: bold, strike or red">

    <br>

    <input ng-model="style2" placeholder="Type: bold, strike or red">

    <br>

    <input ng-model="style3" placeholder="Type: bold, strike or red">

或者

  <div ng-class="{true :'red', false :'green'}[someVariable]"></div>

都可以