[Angularjs]ng-class,ng-class-even,ng-class-odd
2015-07-25 16:22
671 查看
写在前面
最近在通过angularjs将数据绑定到前端,其中也涉及到很多新的东西,一些效果还是很有必要实现的。在使用中发现ng-class,ng-class-even、ng-class-odd的使用,对列表的操作非常方便,就在这里记录一下。系列文章
[Angularjs]ng-select和ng-options[Angularjs]ng-show和ng-hide
[Angularjs]视图和路由(一)
[Angularjs]视图和路由(二)
[Angularjs]视图和路由(三)
[Angularjs]视图和路由(四)
一个例子
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp"> <head> <title>class</title> <script src="JS/angular.min.js"></script> <script src="JS/angular-route.min.js"></script> <script> var app = angular.module('myapp', []); app.controller('ColorController', function ($scope) { $scope.users = [{ id: 1, name: 'wolfy', age: 20 }, { id: 2, name: 'wolfy2', age: 20 }, { id: 3, name: 'wolfy3', age: 20 }]; }); </script> <style> .main { border: 1px solid #0094ff; width: 100%; } .list { margin: 8px auto; width: 90%; text-align: center; } .even { background-color: lightgray; } .odd { background-color: lightgreen; } </style> </head> <body> <div ng-class="'main'" ng-controller="ColorController"> <h2>示例一</h2> <table ng-class="'list'" border="1" cellpadding="0" cellspacing="0"> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> <tr ng-repeat="user in users" ng-class-even="'even'" ng-class-odd="'odd'" > <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> </table> <h2>示例二</h2> <table ng-class="'list'" border="1" cellpadding="0" cellspacing="0"> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> <tr ng-repeat="user in users" ng-class="($index+1)%2==0?'even':'odd'"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> </table> </div> </body> </html>
总结
这里需要注意在使用ng-class,ng-class-even,ng-class-odd时,需为类样式加上单引号,不然不起作用。相关文章推荐
- Angular2.0-组件
- angular cors跨域资源共享设置 和formdata设定
- “Thinking in AngularJS” if I have a jQuery background?
- Angular2 use ng-xx (ng-if)
- nyoj 122Triangular Sums
- 给 Web 开发者的 25 款最有用的 AngularJS 工具
- 构建自己的AngularJS
- AngularJs编写指令
- 南阳oj Triangular Sums 语言入门
- AngularJS 的表单验证
- AngularJS Service vs Factory - Once and for all
- AngularJS+asp.net的结合使用
- angularjs图片上传后不刷新的解决办法
- AngularJS 的表单验证
- AngularJS学习笔记(三)
- AngularJS学习笔记(一)
- angularjs——依赖注入
- 初识angularjs
- Angular的一些知识点
- angularjs的双向数据绑定