寫在前面
最近在通過angularjs將數據綁定到前端，其中也涉及到很多新的東西，一些效果還是很有必要實現的。在使用中發現ng-class，ng-class-even、ng-class-odd的使用，對列表的操作非常方便，就在這里記錄一下。
系列文章
[Angularjs]ng-select和ng-options
一個例子
<!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時，需為類樣式加上單引號，不然不起作用。