1.ng-repeat指令可以完美的显示表格;

2.在表格中显示数据:

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

<table>

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

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

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

  </tr>

</table>

</div>

<script>

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

app.controller('customersCtrl',function($scope,$http){

  $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php");

  .success(function(response){$scope.names=response.records});

});

</script>

3.使用CSS样式:

<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>

4.使用orderBy过滤器:排序显示,可以使用orderBy过滤器;

<table>

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

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

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

  </tr>

</table>

5.使用uppercase过滤器转换为大写:

<table>

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

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

    <td>{{x.Country | uppercase }}</td> 

  </tr>

</table>

6.显示序号($index):表格显示序号可以在<td>中添加$index;

<table>

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

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

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

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

  </tr>

</table>

7.使用$even和$odd:

<table>

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

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

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

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

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

</tr>

</table>

AngularJS 学习之表格的更多相关文章

  1. 《AngularJS学习整理》系列分享专栏

    <AngularJS学习整理>系列分享专栏   <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...

  2. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  3. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  4. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  5. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

  6. Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

    karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...

  7. AngularJs学习总结-了解基本特性(-)

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  8. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  9. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

随机推荐

  1. MST:Out of Hay(POJ 2395)

    缺乏粮草 题目大意:一群牛要修建一些通道,到各个农场距离总和要最小,求这些通道的最大值 水题了,一个Kruskal搞定 #include <iostream> #include <f ...

  2. #ifndef -摘自百度百科

    #ifndef 标识1 //判断"标识1"是否定义,如果被定义则返回假,如果没有被定义则返回真. /**********************************/ 语句1 ...

  3. 【XLL 文档翻译】【第1部分】 Add-in 管理器 和 XLL 接口函数

    xlAddInManagerInfo/xlAddInManagerInfo12 在 Excel 会话中,每一次调用 Add-In 管理器时,系统会调用这两个函数.此函数可以在 Add-In 管理器中提 ...

  4. 让U盘永不中毒的解决办法

    一.背景: 在学校上课的时候,有个老师很潇洒的拿着一个U盘就来教室上课了.然后快上课的时候在电脑上准备播放课件.注意,这一瞬间其妙的事情发生了,课件因为他的U盘中病毒了,打不开了,老师当时笑了.后来又 ...

  5. 多米诺(codevs 3052)

    题目描述 Description 一个矩形可以划分成M*N个小正方形,其中有一些小正方形不能使用.一个多米诺骨牌占用两个相邻的小正方形.试问整个区域内最多可以不重叠地放多少个多米诺骨牌且不占用任何一个 ...

  6. C#冒泡排序

    C#最简单的冒泡排序,需要的朋友可作参考: 思路: 使用两个for循环,就可以遍历数组,这样就可以确保每个数组元素都被使用 对比前后两个数,将小的数字和大的交换位置,引入一个临时变量temp来进行交换 ...

  7. iOS系类教程之用instruments来检验你的app

    比较了好多关于instruments 还是发现老外写的比较牛逼.于是果断翻译过来.有能力的的可以去看英文原版,鼓励大家看原版资料远离二手教程.这里是原文   入门 为了节省大家的时间,提供一个演示的D ...

  8. Struts2拦截器之ModelDrivenInterceptor

    叙述套路: 1.这是个啥东西,它是干嘛用的? 2.我知道它能干啥了,那它咋个用呢? 3.它能跑起来了,但是它是咋跑起来的是啥原理呢? 一.ModelDriven是个啥?他能做什么? 从前端页面到后端的 ...

  9. NYOJ题目74小学生算术

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsYAAAI0CAIAAACRUHjwAAAgAElEQVR4nO3dO3LbyroG0DsJ5RqIYg

  10. Android -- Looper、Handler、MessageQueue等类之间关系的序列图

    原文:Android源码解析之(二)-->异步消息机制 通过阅读文章及其中提到的一些参考文章,模模糊糊的理解了Android的异步消息机制.为了能够进行消化吸收,决定把各类之间的交互通过图的形式 ...