AngularJS基础 ng-class-odd 指令示例
- 作者: 我要让全世界知道我狠低调
- 来源: 51数据库
- 2021-08-19
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资料的整理，有需要的朋友参考下。
推荐阅读
热点文章
Angular中响应式表单的三种更新值方法详析
7
Angularjs实现下拉框联动的示例代码
7
详解AngularJS跨页面传值（ui-router）
2
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
3
angular2路由切换改变页面title的示例代码
4
Angular2 组件间通过@Input @Output通讯示例
5
Angularjs中ng-repeat的简单实例
3
AngularJS 中ui-view传参的实例详解
4
浅谈Angular路由守卫
4
详解基于Angular4+ server render(服务端渲染)开发教程
4
