代码下载：https://files.cnblogs.com/files/xiandedanteng/AngularJSAuthorRepeat.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:yellow;
        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="(author,member) in ctrl.members" ng-class="ctrl.getBackground(member.gender)">
        {{member.id}}.name={{author}},age={{member.age}}
    <div>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;
       self.members={
        andy:{id:1,age:20,gender:'male'},
        bill:{id:2,age:21,gender:'female'},
        Cindy:{id:3,age:22,gender:'male'},
        douglas:{id:4,age:23,gender:'female'},
        Einstein:{id:5,age:24,gender:'male'},
       };

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

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

效果：

要点：

ng-repeat指令可以显示出一个对象所有的属性名和属性值。

AngularJS的ng-repeat显示属性名和属性值的更多相关文章

  1. Object 对象（对象的分类、属性（属性名和属性值）、基本数据类型与引用数据类型区别）

    Object——引用数据类型 基本数据类型的不足之处:基本数据类型是单一的值,不能表现出值与值之间的所属关系 object分为内建对象.宿主对象和自定义对象 a 内建对象:ES标准中定义的对象,在任何 ...

  2. java中遍历实体类，获取属性名和属性值

    方式一(实体类): //java中遍历实体类,获取属性名和属性值 public static void testReflect(Object model) throws Exception{ for ...

  3. java 反射机制--根据属性名获取属性值

    1.考虑安全访问范围内的属性,没有权限访问到的属性不读取 /** * 根据属性名获取属性值 * * @param fieldName * @param object * @return */ priv ...

  4. C# 随机给一个全部信息都未知的类类型，如何获取该类的类名、属性个数、属性名、属性的数据类型、属性值？

    一.场景假设 假设现在有一个泛型类T的实例对象t,该T类的全部信息都未知. 要求:打印输出实例对象t的类名.属性个数.属性名.属性的数据类型.属性值. 二.解决问题 1.我们根据输出的内容要求定义一个 ...

  5. .net 取得类的属性、方法、成员及通过属性名取得属性值

    //自定义的类 model m = new model(); //取得类的Type实例 //Type t = typeof(model); //取得m的Type实例 Type t = m.GetTyp ...

  6. 第二章 Jackson属性名转换+属性忽略

    @Data @JsonIgnoreProperties(ignoreUnknown = true) public class MyRecord { private boolean succeed; p ...

  7. .net 取得类的属性、方法、成员及通过属性名取得属性值

    //自定义的类 model m = new model();   //取得类的Type实例 //Type t = typeof(model);    //取得m的Type实例 Type t = m.G ...

  8. JavaScript属性名和属性值

    ㈠属性名 var obj = new Object(); 向对象中添加属性 ⑴属性名:           - 对象的属性名不强制要求遵守标识符的规范                 什么乱七八糟的名 ...

  9. JS基础_属性名和属性值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. luogu3178 [HAOI2015]树上操作

    裸题 #include <iostream> #include <cstdio> using namespace std; typedef long long ll; int ...

  2. Jmeter(四)_逻辑控制器详解

    循环控制器: 指定其子节点运行的次数,可以使用具体的数值,也可以设置为变量 1:勾选永远:表示一直循环下去 2:如果同时设置了线程组的循环次数和循环控制器的循环次数,那循环控制器的子节点运行的次数为两 ...

  3. Python的深浅copy

    27.简述Python的深浅拷贝以及应用场景? 深浅拷贝的原理 深浅拷贝用法来自copy模块. 导入模块:import copy 浅拷贝:copy.copy 深拷贝:copy.deepcopy 字面理 ...

  4. 2017ICPC北京 J：Pangu and Stones

    #1636 : Pangu and Stones 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In Chinese mythology, Pangu is the fi ...

  5. 【bzoj4785】[Zjoi2017]树状数组 线段树套线段树

    题目描述 漆黑的晚上,九条可怜躺在床上辗转反侧.难以入眠的她想起了若干年前她的一次悲惨的OI 比赛经历.那是一道基础的树状数组题.给出一个长度为 n 的数组 A,初始值都为 0,接下来进行 m 次操作 ...

  6. 【Luogu】P2473奖励关（期望DP）

    题目链接 逆推期望DP.设f[i][j]为1~i-1中吃到的宝物集合为j,在i~k轮能得到的最大期望分数. 如果不吃显然f[i][j]+=f[i+1][j]/n 如果吃就是f[i][j]+=max(f ...

  7. kb-07线段树--10--dfs序建树

    /* hdu3974 dfs序建树,然后区间修改查询: */ #include<iostream> #include<cstdio> #include<cstring&g ...

  8. Github管理 第二步：Eclipse+Github，管理Java Project版本（First Commit）

    1.提醒 如果你的Eclipse和本文一样操作,却出现了不同的结果和莫名其妙的错误,换个Eclipse也许更快. 我用了2个Eclipse,第一个一步一个坑,第2个非常顺利…… 所以,继Windows ...

  9. Python Base One

    //this is my first day to study python, in order to review, every day i will make notes (2016/7/31) ...

  10. form标签

    一 什么是form标签 <form> 标签用于为用户输入创建 HTML 表单. 表单用于向服务器传输数据. 二 属性 1 method method 属性规定如何发送表单数据(表单数据发送 ...