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. php字符的替换，截取，指定查找

    <?php/** * Created by 郭鹏. * User: msi * Date: 2017/9/27 * Time: 14:17 *///随机数生成器echo rand();echo ...

  2. 实例讲解webpack的基本使用第三篇

    这一篇来讲解一下webpack的htmlWebpackHtml插件的使用. 先来思考一个实际问题:我们现在在index.html引用的js文件是写死的.但是我们每次打包后的文件都是动态的,那么我们怎么 ...

  3. Rectangles hdu2461容斥定理

    Rectangles Time Limit: 5000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  4. input输入中文时，拼音在输入框内会触发input事件的问题。

    问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需要完成的需求就是在输入阶段不触发input中的事件,选词之后文字落 ...

  5. [js高手之路] html5 canvas动画教程 - 匀速运动

    匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的.其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的. < ...

  6. String+ String.Concat String.Format StringBuilder 之间的性能测试

    找到一篇国外的代码,专门来测试这个, String+ String.Concat String.Format StringBuilder 前三个在100个左右字符串差不多, String.Concat ...

  7. 2—sat

    模型的解决方法看论文<利用对称性解决2-SAT问题> HDU1814 :难度1.5 HDU1824: 难度 2 HDU1815: 难度3 HDU1816: 对于每两个人,二选一HDU181 ...

  8. 在Eclipse里面使用git上传项目到码云

    Eclispe上使用git 1.安装git 按照下图的步骤: 安装过就不用再安装了,没有安装的安装一下! 安装完毕之后:需要做一些初始化的设置: 2.上传项目到码云上 1.首先在码云上建立一个项目 2 ...

  9. Github Page+Bmob实现简单动态功能

    Github Page基于jekyll能够实现简单的静态网站,但是没有提供后端服务.目前国内外也有很多提供后台服务,特别是云服务.譬如国外有AWS,记得好像是注册免费使用一年:再如Heroku,支持N ...

  10. 【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...