[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时,需为类样式加上单引号,不然不起作用。

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/4676116.html
时间: 2016-05-24

[Angularjs]ng-class,ng-class-even,ng-class-odd的相关文章

AngularJS的ng Http Request与response格式转换方法_AngularJS

本文实例讲述了AngularJS的ng Http Request与response格式转换方法.分享给大家供大家参考,具体如下: angular作为Single Page Application推荐的交互方式当然是基于json的ajax调用.但今天要说的是当你不幸工作在一个遗留或者不可控制的服务上,而这服务是基于非json提交方式(或许是常规表单(form)提交,或者其他自定义数据格式),那么我们只能改变ng内部$http默认request/response格式转化方式. 所幸的是ng $htt

[译]ng指令中的compile与link函数解析

通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用

必须正确理解的---ng指令中的compile与link函数解析

这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87%E4%BB%A4%E4%B8%AD%E7%9A%84compile%E4%B8%8Elink%E5%87%BD%E6%95%B0%E8%A7%A3%E6%9E%90/   开始分析之前,先让我们看看ng中是怎么样处理指令的. 当浏览器渲染一个页面时,本质上是读html标识,然后建立dom节点,当d

高可用Hadoop平台-Flume NG实战图解篇

1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume NG搭建 Failover测试 截图预览 下面开始今天的博客介绍. 2.Flume NG简述 Flume NG是一个分布式,高可用,可靠的系统,它能将不同的海量数据收集,移动并存储到一个数据存储系统中.轻量,配置简单,适用于各种日志收集,并支持Failover和负载均衡.并且它拥有非常丰富的组件.Fl

阐述Flume OG到 Flume NG发生的革命性变化

但随着 FLume 功能的扩展,Flume OG 代码工程臃肿.核心组件设计不合理.核心配置不标准等缺点暴露出来,尤其是在 Flume OG 的最后一个发行版本 0.94.0 中,日志传输不稳定的现象尤为严重,这点可以在 BigInsights http://www.aliyun.com/zixun/aggregation/11790.html">产品文档的 troubleshooting 板块发现.为了解决这些问题,2011 年 10 月 22 号,cloudera 完成了 Flume-

LemonLDAP::NG v1.0.3发布 模块化的Web单点登录系统

Lemonldap::NG 是一个模块化的 Web  单点登录系统,基于 Apache::Session 模块.它简化了构建应用程序的保护区域.可管理认证和授权,可实现完全的 AAA 保护.LemonLDAP::NG 是在 Lemonldap 基础上完全重新,tar包中包含所需的所有组件,不过为 Lemonldap 开发的模块将无法在 LemonLDAP::NG 上使用. LemonLDAP::NG is an open source Web Single Sign On product (We

测试IE浏览器对JavaScript的AngularJS的兼容性

这篇文章主要介绍了测试IE浏览器对JavaScript的AngularJS的兼容性的方法,尽管随着Windows10的近期上市,IE浏览器即将成为历史...需要的朋友可以参考下 短版本 为确保Angular应用在IE上能够工作请确认:   1. 在IE7或更早的版本上polyfill JSON.stringify.你可以使用JSON2或JSON3来polyfills. ? 1 2 3 4 5 6 7 8 9 10 11 <!doctype html> <html xmlns:ng=&qu

AngularJS使用自定义指令替代ng-repeat的方法_AngularJS

前言 大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些.特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15

AngularJs定制样式插入到ueditor中的问题小结_AngularJS

总结一下自己给编辑器定制样式的过程中所遇到的问题,主要是编辑器的二次开发接口,以及用angular定制样式,问题不少,终于在**的帮助下,完成了,还剩下老版本和新版本的交互没有弄好,不过不难.下面分别讲解问题. ueditor的开发 你可以在官网上下载任意版本,进行使用即可:http://ueditor.baidu.com/website/download.html 下载后按照官网上的配置就可以使用.文档地址:http://fex.baidu.com/ueditor/ 关于ueditor二次开发

Angularjs 源码分析4

angularjs之$compile 今天主要说说ng里的$compile,这是一个非常关键的服务,页面上的双向绑定,各个监听基本上都是在这里执行的. 源码部分还是引用angular1.2.4,链接在这里下载 compile的源头 ng里最开始引用$compile的地方就是把所有系统内建的指令添加到$CompileProvider里,由于代码太长,只写些关键部分的 $provide.provider('$compile', $CompileProvider). directive({ a: ht