写在前面

最近在通过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. CSS 布局调试工具

    说是工具其实只是一段 Javascript 代码,但非常实用,它会给页面里所有的 DOM 元素添加一个 1px 的描边(outline),方便我们在调试 CSS 过程中分析.排查问题. 先来看看代码, ...

  2. Adivisor

    1.Adivisor是一种特殊的Aspect,Advisor代表spring中的Aspect 2.区别:advisor只持有一个Pointcut和一个advice,而aspect可以多个pointcu ...

  3. 在windows中，如何使用cmd命令行窗口正确显示编码为utf-8格式的文字

    在windows中,如何使用cmd命令行窗口正确显示编码为utf-8格式的文字呢? 正确的步骤如下: 1, 打开cmd命令行窗口 2, 输入命令 >chcp 65001 数字65001代表的是c ...

  4. yslow性能优化的35条黄金守则

    参考Best Practices for Speeding Up Your Web Site Exceptional Performance 团队总结了一系列优化网站性能的方法,分成了7个大类35条, ...

  5. Content Factory：辅助 MonoGame 游戏开发

    Content Factory 是一款辅助 MonoGame 游戏开发的工具.它提供素材管理的多项功能,包括编译素材.编辑自定义数据等,并能同时应用多个游戏平台. 项目设置 选择要创建游戏项目的平台, ...

  6. Google proto buffer的安装/使用

    protobuf安装/使用原本是要在官网上下载的:http://protobuf.googlecode.com/files/protobuf-2.5.0.tar.gz可惜已被墙,幸好有好心人提供了以下 ...

  7. TDD开发感悟

    由于公司要实现TDD形式的开发,所以准备了一下,准备在后续的项目中,投入到TDD的怀抱中. 在找一些参考书目的过程中,偶遇<测试驱动开发的艺术>这本书,书中的编码为JAVA派系,但是书的内 ...

  8. KnockOutJS步步深入

    由于项目原因,目前需要用到KnockOutJS,找到了一个锻炼Knockout的绝好的网址:http://learn.knockoutjs.com/ 一步一步的按照教程来,可以把KO掌握的八九不离十.

  9. 面试准备(二) 绘制 Activity 的生命流程图

    我们来看一下这一张经典的生命周期流程图: 相信不少朋友也已经看过这个流程图了,也基本了解了Activity生命周期的几个过程,我们就来说一说这几个过程. 1.启动Activity:系统会先调用onCr ...

  10. 详解 ManualResetEvent

    今天详细说一下ManualResetEvent 它可以通知一个或多个正在等待的线程已发生事件,允许线程通过发信号互相通信,来控制线程是否可心访问资源 当一个线程开始一个活动(此活动必须完成后,其他线程 ...