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. pytorch实现VAE

    一.VAE的具体结构 二.VAE的pytorch实现 1加载并规范化MNIST import相关类: from __future__ import print_function import argp ...

  2. #define WIN32_LEAN_AND_MEAN

    不加载MFC所需的模块.用英语解释:Say no to MFC如果你的工程不使用MFC,就加上这句,这样一来在编译链接时,包括最后生成的一些供调试用的模块时,速度更快,容量更小.不过对于较大工程,MF ...

  3. Dynamic Inversions 50个树状数组

    Dynamic Inversions Time Limit: 30000/15000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others ...

  4. UIAlertController基本使用与内存泄露分析!!!

    最近开发过程中,发现内存会无故增加,在做内存优化的过程中,无意间发现了内存泄露的情况,那就是从iOS8.0 苹果开始推荐我们使用的UIAlertController!!! 看到这你是不是会嘲笑我第一次 ...

  5. Spring -- 配置bean的三种方法

    配置通过静态工厂方法创建的bean public class StaticBookFactory { //静态工厂方法: public static Book getBook(String bookN ...

  6. WPF中的imagesource 和内存图片的处理

    [转载]ImageSource的使用心得 很多时候,我们会使用图片来装饰UI,比如作为控件背景等. 而这些图片可以分为两种形式,即存在于本地文件系统中的图片和存在于内存中的图片 对于这两种形式的图片, ...

  7. wpf中内置资源文件

    wpf中包含三种文件类型 资源文件:编译到可执行或库 WPF 程序集中的数据文件. 内容文件:与可执行 WPF 程序集具有显式关联的独立数据文件. 源站点文件:与可执行 WPF 程序集没有关联的独立数 ...

  8. Python开篇

    一:Python的前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为 ...

  9. Apache配置腾讯云SSL证书指引

    一．安装Apache 1) 使用yum安装Apache # yum install httpd 2) 修改测试页面 # vim /var/www/html/index.heml PS:修改为测试内容, ...

  10. CentOS 6.5 中安装 Mysql 5.6，并远程连接Mysql

    ι 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.在安装CentOS时,若选择的是Basic Server(可支持J2EE开发),则新安装好的CentOS系统中默认是已经安装了一个mysq ...