写在前面

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

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

  1. Flume NG Getting Started（Flume NG 新手入门指南）

    Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...

  2. Flume NG基本架构与Flume NG核心概念

    导读 Flume NG是一个分布式.可靠.可用的系统,它能够将不同数据源的海量日志数据进行高效收集.聚合.移动,最后存储到一个中心化数据存储系统中. 由原来的Flume OG到现在的Flume NG, ...

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

    这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...

  4. ng之自定义指令

    最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧! 相信用过ng的人都对ng中的指令有所了解,指令,我将其理解为AngularJS操作HTML element的一 ...

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

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

  6. 高可用Hadoop平台－Flume NG实战图解篇

    1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume N ...

  7. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  8. ng工程升级cli版本

    全局更新ng 然后在工程里 ng update @angular/cli @angular/core

  9. ng 构建

    1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...

  10. Angular CLI 启动 版本ng 4

    npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200

随机推荐

  1. Maven 其他功能

    测试:指定测试哪些测试类,指定哪些测试类不测试,可以使用通配符 使用 Hudson 进行持续集成 持续集成:快速且高频率地自动构建项目的所有源码,并为项目成员提供丰富的反馈信息 一个典型的持续集成场景 ...

  2. VS2010引用App_Code下的类文件问题解决方法

    原文连接:http://blog.csdn.net/zjlovety/article/details/7658528 VS2020中“添加ASP.NET文件夹”里没有App_Code,添加普通文件夹然 ...

  3. JayProxy的设置

    1. mac http://pac.jayproxy.com/jayproxy/jayproxy.pac 2. wifi http://pac.jayproxy.com/jayproxy/m.pac ...

  4. raid知识

    1,raid形象理解(饮水机模型) http://dingyichao.blog.51cto.com/442449/698762     2,raid利用率 3,raid详细理解 raid0 raid ...

  5. Linux 网络编程九（select应用--大并发处理）

    //网络编程服务端 /* * 备注:因为客户端代码.辅助方法代码和epoll相同,所以select只展示服务器端代码 */ #include <stdio.h> #include < ...

  6. WireShark系列： 使用WireShark过滤条件抓取特定数据流(zz)

    应用抓包过滤,选择Capture | Options,扩展窗口查看到Capture Filter栏.双击选定的接口,如下图所示,弹出Edit Interface Settints窗口. 下图显示了Ed ...

  7. 炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件

    多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件 在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件 先来看一 ...

  8. 网络封包分析工具Charles使用

    网址:http://www.charlesproxy.com/ 截取网络封包的工具. 简介 Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯协议, ...

  9. 物联网-手机远程控制家里的摄像头(2) - POP3和SMTP的C语言精简实现

    在上一篇博客里面,使用了Python来发送.接收mail,但是实际测试中出现了一些不稳定的 情况,而且Python和即将使用的opencv会不兼容,使用进程间通讯或者其他方法会让整个系统 显得复杂而且 ...

  10. 疯狂位图之——位图实现12GB无重复大整数集排序

    <Programming Pearls>(编程珠玑)第一章讲述了如何用位图排序无重复的数据集,整个思想很简洁,今天实践了下. 一.主要思想 位图排序的思想就是在内存中申请一块连续的空间作为 ...