代码下载：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. 匈牙利算法 - Luogu 1963 变换序列

    P1963 变换序列 题目描述 对于N个整数0,1,-,N-1,一个变换序列T可以将i变成Ti,其中:Ti∈{0,1,-,N-1}且 {Ti}={0,1,-,N-1}. x,y∈{0,1,-,N-1} ...

  2. day05_01 鸡汤+内容回顾

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

  3. logging——日志

    导读 很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式的日志,log ...

  4. 触屏版轻量级分页插件jqPagination分享

    说到HTML5和jquery上的分页问题,优秀的分页插件网上一抓一大把,然而同时适合兼容在Ipad和手机端的网站分页却不是特别多. 或许有人会说,触屏现在流行下拉底部后加载下一页内容,类似微博和QQ空 ...

  5. [windows篇][关掉某些服务]

  6. [Android Studio篇][1] AS开发中遇到问题汇总

    1 在android新建文件,提示权限不够,增加权限 修改工程下 main/AndroidMainfest.xml增加 <uses-permission android:name="a ...

  7. [转]廖雪峰:datetime用法

    datetime是Python处理日期和时间的标准库. 获取当前日期和时间 我们先看如何获取当前日期和时间: >>> from datetime import datetime &g ...

  8. malloc&&free的系统运行机制及其源代码的理解

    一.malloc()和free()的基本概念以及基本用法: 1.函数原型及说明: void *malloc(long NumBytes):该函数分配了NumBytes个字节,并返回了指向这块内存的指针 ...

  9. HashMap源码分析jdk1.6

    HashMap数组每个元素的初始值为NULL  1.定义 public interface Map<K,V> { int size(); boolean isEmpty(); boolea ...

  10. 【bzoj1406】 AHOI2007密码箱 数论

    在一次偶然的情况下,小可可得到了一个密码箱,听说里面藏着一份古代流传下来的藏宝图,只要能破解密码就能打开箱子,而箱子背面刻着的古代图标,就是对密码的提示.经过艰苦的破译,小可可发现,这些图标表示一个数 ...