代码下载：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. 流式处理框架storm浅析（上篇）

    本文来自网易云社区 作者:汪建伟 前言 前一段时间参与哨兵流式监控功能设计,调研了两个可以做流式计算的框架:storm和spark streaming,我负责storm的调研工作.断断续续花了一周的时 ...

  2. 装箱I（01背包）

    描述 给两个有一定容量的箱子,往里面装宝石(宝石总容量不能超过箱子容量),不同的宝石有不同的容量和价值.求两个箱子里最大宝石的价值. 输入 line 1: Input n;  n:表示宝石数量    ...

  3. C语言总结（5）

    一．函数的定义: 函数是一个完成特定工作的独立程序模块,包括库函数和自定义函数.例如:scanf(),printf()为库函数,cylinder(),fact()为自定义函数. 函数定义的一般形式: ...

  4. [错误处理]: How to deal with chrome failing to launch GPU process

    https://github.com/jupyter/notebook/issues/2836 "export BROWSER=google-chrome" command wor ...

  5. Timer和TimerTask详解

    1.概览 Timer是一种定时器工具,用来在一个后台线程计划执行指定任务.它可以计划执行一个任务一次或反复多次.TimerTask一个抽象类,它的子类代表一个可以被Timer计划的任务. 简单的一个例 ...

  6. 《人月神话》读书笔记（2）-week3

    为了确保团队中的每个人都能保持系统概念上的完整性,关于项目的书面规格说明是必不可少的.手册要描绘用户可见的一切,但不应支配实现的过程.光有规格说明也是不够的,会议也是必要的.书中提到的周例会会迅捷地给 ...

  7. 【转】hibernate映射(单向双向的一对多、多对一以及一对一、多对一)

    多对一关联映射:在多的一端加入一个外键指向一的一端,它维护的关系是多指向一 一对多关联映射:在多的一端加入一个外键指向一的一端,它维护的关系是一指向多 也就是说一对多和多对一的映射策略是一样的,只是站 ...

  8. BZOJ 4554 [Tjoi2016&Heoi2016]游戏 ——二分图

    出原题,直接二分图匹配即可. #include <cstdio> #include <vector> #include <cstring> using namesp ...

  9. 多态Poly中的向上/下转型 Upcast/Downcast

    [参考资料]马克-to-win java中多态polymorphism,向上转型和动态方法调度有什么用? java中什么叫多态,动态方法调度(dynamic method dispatch)? jav ...

  10. QTREE系列题目总结

    $QTREE$ 就是一套树上数据结构练习题. 这套题貌似来源于 $SPOJ$,我是在 $luogu$ 看到的. $QTREE1$ 题意 一棵 $n$ 个点的带边权树,要求支持 单边改权值 和 询问路径 ...