码迷,mamicode.com
首页 > 其他好文 > 详细

ngClass指令3种使用

时间:2017-02-23 00:14:20      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:nbsp   指令3   image   syntax   src   lin   .com   cat   映射   

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>

技术分享

 

ngClass指令3种使用

标签:nbsp   指令3   image   syntax   src   lin   .com   cat   映射   

原文地址:http://www.cnblogs.com/lianghaijie-ctw/p/6431488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!