首页 > 代码库 > ngClass指令3种使用
ngClass指令3种使用
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种使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。