代码下载：https://files.cnblogs.com/files/xiandedanteng/angualrJSngRepeatTable.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:red;
        width:400px;
    }
    .even{
        background-color:#336699;
        width:400px;
    }
  </style>
    <meta charset="utf-8">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body>
    <table ng-controller="MainCtrl as ctrl">
        <tr ng-repeat="(author,member) in ctrl.members" ng-class="ctrl.getBackground({{$odd}})">
            <td>{{$index}}</td>
            <td><span ng-bind='author'/></td>
            <td><span ng-bind='member.id'/></td>
            <td><span ng-bind='member.gender'/></td>
            <td><span ng-bind='member.age'/></td>
        </tr>
    </table>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;

       self.members={
        andy:{id:11,age:20,gender:'male'},
        bill:{id:12,age:21,gender:'female'},
        Cindy:{id:23,age:22,gender:'male'},
        douglas:{id:54,age:23,gender:'female'},
        Einstein:{id:85,age:24,gender:'male'},
       };

       // 根据奇偶行决定背景
       self.getBackground=function(odd){
            if(odd==true){
                return 'odd';
            }else{
                return 'even';
            }
       };

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

效果：

AngularJS的ng-repeat显示表格的更多相关文章

  1. 如何用angularjs制作一个完整的表格之五__完整的案例

    由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...

  2. AngularJS中自定义有关一个表格的Directive

    本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table>    <thead>        <tr>  ...

  3. EL表达式结合页面JSTL使用 迭代显示表格

    1.迭代显示表格 <%@ page isELIgnored="false"%><%@ taglib uri="/WEB-INF/struts-bean. ...

  4. AngularJS集合数据遍历显示

    AngularJS集合数据遍历显示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  5. easyui学习笔记7—在手风琴中显示表格

    在这一篇中我们看看如何在手风琴里面显示表格数据的. 1.先看看引用的资源 <link rel="stylesheet" type="text/css" h ...

  6. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

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

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

  8. 可以正确显示表格线的Grid item view

    Android上要显示一个表格,没有Swing那么专门的JTable可用. 搜了下,一般用GridView,有诸多不便和需要自己实现的地方: 跟ListView一样的Adapter,getView的时 ...

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

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

随机推荐

  1. Xampp 配置出现403无法访问

    找到\xampp\apache\conf\httpd.conf配置文件 Access forbidden! You don’t have permission to access the reques ...

  2. python - work - 2

    #-*- coding:utf-8 -*-# author:jiaxy# datetime:2018/11/3 11:48# software: PyCharm Community Edition d ...

  3. day05_01 鸡汤+内容回顾

    推荐电影: 1.被解救的姜戈 2.华尔街之狼 3.阿甘正传 4.辛德勒的名单 5.肖申克的救赎 6.上帝之城 7.焦土之城 8.绝美之城 打印多行 msg = "hello 1 hello ...

  4. Leetcode 480.滑动窗口中位数

    滑动窗口中位数 中位数是有序序列最中间的那个数.如果序列的大小是偶数,则没有最中间的数:此时中位数是最中间的两个数的平均数. 例如: [2,3,4],中位数是 3 [2,3],中位数是 (2 + 3) ...

  5. Golang遇到的问题记录

    1,windows cmd 结束输入问题 func main() { counts := make(map[string]int) countLines(os.Stdin, counts) fmt.P ...

  6. 【bzoj】P4407于神之怒加强版（莫比乌斯反演）

    题目链接 套路一般的枚举$gcd(i,j)=w$.设$min(n,m)=top$,则有 $\sum\limits_{i=1}^{n}\sum\limits_{j=1}{m}gcd(i,j)$ $=\s ...

  7. showModalDialog实现本页面内部跳转

    showModalDialog的弹窗中,要实现本窗口跳转而不打开新窗口,要么submit提交,要么按如下跳转,而不能采用location=xx来跳转:function go_link(url) {   ...

  8. java面试题之为什么hashmap的数组初始化大小都是2的N次方？

    当数组长度为2的N次方时,不同的key算出的index相同的几率小,数据在数组上分配均匀,hash碰撞的几率小,提升查询效率,从大O(N)提升至O(1):

  9. Tomcat和JVM的内存配置

    原文路径:https://www.cnblogs.com/pangxiansheng/p/5378537.html JVM内存分配设置的参数有四个 -Xmx Java Heap最大值,默认值为物理内存 ...

  10. 标准C程序设计七---34

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...