程序下载：https://files.cnblogs.com/files/xiandedanteng/angularJSRender.rar

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document </title>
  <style>
    .odd{
        background-color:blue;
        width:300px;
    }
    .even{
        background-color:pink;
        width:300px;
    }
  </style>
    <meta charset="utf-8">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl">
    <div ng-repeat="member in ctrl.members" ng-class="ctrl.getBackground(member.gender)">
        {{member.id}}.name={{member.name}},age={{member.age}}
    <div>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;
       self.members=[
        {id:1,name:'andy',age:20,gender:'male'},
        {id:2,name:'bill',age:21,gender:'female'},
        {id:3,name:'cindy',age:22,gender:'female'},
        {id:4,name:'douglas',age:23,gender:'female'},
        {id:5,name:'einstein',age:24,gender:'male'},
       ];

       self.getBackground=function(gender){
            if(gender=='male'){
                return 'odd';
            }else{
                return 'even';
            }
       };

     }]);
//-->
</script>

效果：

要点：

ng-class指令用于选择性从html元素中添加或者删除css class

AngularJS的ng-class示例的更多相关文章

  1. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  2. 走进AngularJs(八) ng的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  3. AngularJS - 路由 routing 基础示例

    AngularJS 路由 routing 能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的.当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面.Angu ...

  4. AngularJS中的控制器示例_3

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  5. AngularJS中的控制器示例_2

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  6. AngularJS中的控制器示例

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  7. AngularJS的Foreach循环示例

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularJSForeach.rar 代码: <!DOCTYPE HTML PUBLIC ...

  8. AngularJS入门 & 分页 & CRUD示例

    一.AngularJS 简介 ​ AngularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中. ...

  9. SpringMVC+Spring+Mybatis+AngularJS 多规格保存示例代码

    insert时拿到最新增加的id值 绑定参数 js 实体类 Service实现类 Controller

  10. Angularjs promise对象解析

    1.先来看一段Demo,看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑,使用ng的promise有何优势? var ngApp=angular.module('ngApp',[]) ...

随机推荐

  1. 再谈H2的MVStore与MVMap

    对H2的[MVStore]: http://www.cnblogs.com/simoncook/p/5188105.html 这篇文章的补充. 概述 我们通常用的map,比如HashMap Linke ...

  2. 大数据学习——spark安装

    一主多从 1 上传压缩包 2 解压 -bin-hadoop2..tgz 删除安装包 -bin-hadoop2..tgz 重命名 mv spark-1.6.2-bin-hadoop2.6/ spark  ...

  3. Mysql - 安装及初始化设置

    1. 下载mysql-5.7.13-tar.gz http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.13-linux-glibc2.5-x8 ...

  4. Codeforces Round #473 (Div. 2)

    A. Mahmoud and Ehab and the even-odd game time limit per test 1 second memory limit per test 256 meg ...

  5. LibreOJ β Round #4

    A游戏 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: qmqmqm 提交提交记录统计讨论测试数据   题目描述 qmqmqm和subline ...

  6. TOJ2712: Atlantis

    小数据求面积并 There are several ancient Greek texts that contain descriptions of the fabled island Atlanti ...

  7. 对于运用git将本地文件上传到coding总结

    首先需要在你的本地磁盘下建立一个目录,并且进入该目录. 前几次课程上有讲到&的用法,&&表示并且. 命令 ”makir 文件名 && cd 文件名”,cd指进入 ...

  8. js只能输入汉字

    var reg = new RegExp("[\\u4E00-\\u9FFF]+","g"); if(reg.test(val)){            al ...

  9. 简单使用EL进行标签的替换

    package com.ceshi; public class HtmlShow { public static String transfer(String txt,String cssClass) ...

  10. hdu6038[找规律+循环节] 2017多校1

    /*hdu6038[找规律+循环节] 2017多校1*/ #include<bits/stdc++.h> using namespace std; typedef long long LL ...