ngClass指令3种使用

时间:2023-12-12 18:48:26
CSS代码:
1 .strike {
text-decoration: line-through;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}

1.映射语法

 <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)
<hr>
  //strike, bold, improtant为true时,将分别引用类名deleted, bold, error
 

ngClass指令3种使用

2.字符串语法

<p ng-class="style">Using String Syntax</p>
<input ng-model="style" type="text" placeholder="bold strike red">
</hr>
  //类名多个有效,空间隔开即可

ngClass指令3种使用

ngClass指令3种使用

3.数组语法

<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" type="text" placeholder="bold, strike or red"></br>
<input ng-model="style2" type="text" placeholder="bold, strike or red"></br>
<input ng-model="style3" type="text" placeholder="bold, strike or red"></br>
</hr>

ngClass指令3种使用

ngClass指令3种使用

4.ngClassEven与ngClassOdd

css:

.odd {
color: red;
}
.even {
color: blue;
}
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}}
</span>
</li>
</ol>

ngClass指令3种使用