AngularJS 表格

ng-repeat 指令可以完美的显示表格。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

    <style>

        table, th , td {

            border: 1px solid grey;

            border-collapse: collapse;

            padding: 5px;

        }

        table tr:nth-child(odd) {

            background-color: #f1f1f1;

        }

        table tr:nth-child(even) {

            background-color: #ffffff;

        }

    </style>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

   <table>

       <tr ng-repeat="x in names">

           <td>{{x.name}}</td>

           <td>{{x.age}}</td>

       </tr>

   </table>

</div>

<script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl',function ($scope) {

        $scope.names= [{name : "Ford", age : 12, color : "red"},

             {name : "Fiat", age : 50, color : "white"},

             {name : "Volvo", age : 9, color : "black"}];

    })

</script>

</body>

</html>

使用 orderBy 过滤器

排序显示，可以使用 orderBy 过滤器:

<table>

  <tr ng-repeat="x in names | orderBy : 'age'">

    <td>{{ x.name }}</td>

    <td>{{ x.age}}</td>

  </tr>

</table>

显示序号 ($index)

表格显示序号可以在 <td> 中添加 $index:

<table>

  <tr ng-repeat="x in names">

    <td>{{ $index + 1 }}</td>

    <td>{{ x.name }}</td>

    <td>{{ x.age}}</td>

  </tr>

</table>

使用 $even 和 $odd

odd：奇数行；even：偶数行; 从0开始

<table>

<tr ng-repeat="x in names">

<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.name }}</td>

<td ng-if="$even">{{ x.name }}</td>

<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.age}}</td>

<td ng-if="$even">{{ x.age}}</td>

</tr>

</table>
 <table>

        <tr ng-repeat="x in names">

            <td style="{{$even?'background-color: red':''}}">{{$index + 1}}</td>

            <td style="{{$even?'background-color: red':''}}">{{ x.name }}</td>

            <td style="{{$even?'background-color: red':''}}">{{ x.age}}</td>

        </tr>

    </table>

AngularJS学习篇（十一）的更多相关文章

  1. AngularJS学习篇（二十一）

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  2. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  3. AngularJS学习篇（二十三）

    AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...

  4. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  5. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  6. AngularJS学习篇（十九）

    AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...

  7. AngularJS学习篇（十八）

    AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...

  8. AngularJS学习篇（十七）

    AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/an ...

  9. AngularJS学习篇（十六）

    AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...

随机推荐

  1. Split分割字符串

    第一种方法:打开vs.net新建一个控制台项目.然后在Main()方法下输入下面的程序. string s="abcdeabcdeabcde"; string[] sArray=s ...

  2. TOP命令详解(负载情况)

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  3. 用mp3stego来加密与解密文件的几次尝试

    用法来自实验吧的"Canon"隐写题目的灵感. 先来简单的聊一下这道题目,打开题目后发现了一个mp3文件,除此之外还有一枚压缩包.然而压缩包是加密的,看来我们需要通过解出来mp3里 ...

  4. 1007 正整数分组 1010 只包含因子2 3 5的数 1014 X^2 Mod P 1024 矩阵中不重复的元素 1031 骨牌覆盖

    1007 正整数分组 将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的.   Input 第1行:一个 ...

  5. Bootstrap table 元素列内容超长自动折行显示方法?

    共需要四步: 1.在table元素的父容器div加上:class="table-responsive" 3.设置表头th的width:<th width="20%& ...

  6. 配置zabbix agent向多个server发送数据

    1.背景: agent 端:dba-test-hzj02  172.16.59.197 server端:172.16.59.197  ,172.16.59.98 2.方式: 配置多个server,se ...

  7. ASP.NET没有魔法——ASP.NET MVC 与数据库之EntityFramework配置与连接字符串

    前几篇文章中介绍了如何使用Entity Framework来操作数据库,但是对EF的配置.连接字符串的指定仍然存在一些疑问. 本章将对EF的配置进行介绍. EF可以通过两种方式来实现配置,分别是代码方 ...

  8. 在SQL中用正则表达式替换html标签（2）

    由于数据库的一个表字段中多包含html标签,现在需要修改数据库的字段把html标签都替换掉.当然我可以通过写一个程序去修改,那毕竟有点麻烦.直接在查询分析器中执行,但是MS SQL Server并没有 ...

  9. Struts2 03---数据封装+获取表单提交数据

        Struts的数据封装分为三种:属性封装,模型驱动,表达式封装.下面以获取表单提交数据来简单介绍一下Struts的数据封装. <form action="loginlogin. ...

  10. 全球多个 TOP 网站藏挖矿代码，5 亿 PC 沦为矿工

    据ZDNet报道,现在很多网站都开始在网页脚本中藏匿挖矿代码,在用户访问时偷算力用于挖矿.来自Adguard的报告称也证实,也有5亿台电脑中招. 最新最热的IT技术付费社区 IT帮 itbang.me ...