angularjs ng-class-odd 指令
angularjs 实例
为表格的奇数行设置 class="striped":
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://www.51sjk.com/Upload/Articles/1/0/268/268330_20210708023629683.js"></script> <style> .striped { color:white; background-color:black; } </style> </head> <body ng-app="myapp"> <table ng-controller="myctrl"> <tr ng-repeat="x in records" ng-class-odd="'striped'"> <td>{{x.name}}</td> <td>{{x.country}}</td> </tr> </table> <script> var app = angular.module("myapp", []); app.controller("myctrl", function($scope) { $scope.records = [ { "name" : "alfreds futterkiste", "country" : "germany" }, { "name" : "berglunds snabbk", "country" : "sweden" }, { "name" : "centro comercial moctezuma", "country" : "mexico" }, { "name" : "ernst handel", "country" : "austria" } ] }); </script> </body> </html>
运行结果:
alfreds futterkiste | germany |
berglunds snabbk | sweden |
centro comercial moctezuma | mexico |
ernst handel | austria |
定义和用法
ng-class-odd 指令用于为 html 元素动态的绑定一个或多个 css 类,但只作用于奇数行。
ng-class-odd 指令需要与 ng-repeat 指令搭配使用。
ng-class-odd 指令建议用在表格的样式渲染中,但是所有html元素都是支持的。
语法
<element ng-class-odd="expression"></element>
所有 html 元素都支持。
参数值
值 | 描述 |
---|---|
expression | 表达指定一个或多个 css 类。 |
以上就是对angularjs资料的整理,有需要的朋友参考下。