ngClass指令3种使用

最新推荐文章于 2023-12-21 21:55:31 发布

weixin_30709061

最新推荐文章于 2023-12-21 21:55:31 发布

阅读量91

点赞数

原文链接：http://www.cnblogs.com/lianghaijie-ctw/p/6431488.html

版权

本文介绍如何在 Angular 中使用不同的语法来动态地为元素添加 CSS 类，包括映射语法、字符串语法及数组语法，并展示了如何利用 ngClassEven 和 ngClassOdd 为列表项自动交替设置样式。

摘要由CSDN通过智能技术生成

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>