- CSS代码:1.strike {
- 2 text - decoration: line - through;
- 3
- }
- 4.bold {
- 5 font - weight: bold;
- 6
- }
- 7.red {
- 8 color: red;
- 9
- }
1. 映射语法
- 1 <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
- 2 <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
- 3 <input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
- 4 <input type="checkbox" ng-model="error"> error (apply "red" class)
- 5 <hr>
- //strike, bold, improtant为true时,将分别引用类名deleted, bold, error
2. 字符串语法
- <p ng-class="style">
- Using String Syntax
- </p>
- <input ng-model="style" type="text" placeholder="bold strike red">
- </hr>
- //类名多个有效,空间隔开即可
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>
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>
来源: http://www.bubuko.com/infodetail-1955693.html