[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 @   wolfy  阅读(2752)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手