[Angularjs]ng-class,ng-class-even,ng-class-odd

写在前面

最近在通过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时，需为类样式加上单引号，不然不起作用。

posted @ 2015-07-25 16:22  wolfy  阅读(2751)  评论(0)  编辑  收藏  举报