ylbtech-AngularJS：表格
1.返回顶部
1、

AngularJS 表格

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

在表格中显示数据

使用 angular 显示表格是非常简单的：

AngularJS 实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>

</head>

<body>

<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("/try/angularjs/data/Customers_JSON.php")

    .then(function (result) {

        $scope.names = result.data.records;

    });

});

</script>

尝试一下 »

废弃声明 (v1.5)

v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

如果你使用的是 v1.5 以下版本，可以使用以下代码：

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

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

    $http.get("/try/angularjs/data/Customers_JSON.php")

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

});

Customers_JSON.php 文件代码：

<?php

echo <<<EOT

{

"records":[

{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},

{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},

{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},

{"Name":"Around the Horn","City":"London","Country":"UK"},

{"Name":"B's Beverages","City":"London","Country":"UK"},

{"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},

{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},

{"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},

{"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},

{"Name":"Bon app'","City":"Marseille","Country":"France"},

{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},

{"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},

{"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},

{"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},

{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}

]

}

EOT;

?>

使用 CSS 样式

为了让页面更加美观，我们可以在页面中使用CSS：

CSS 样式

<style>

table, th , td {

  border: 1px solid grey;

  border-collapse: collapse;

  padding: 5px;

}

table tr:nth-child(odd) {

   margin: 0px; padding: 0px; color: rgb(170, 17, 17);"> #f1f1f1;

}

table tr:nth-child(even) {

   margin: 0px; padding: 0px; color: rgb(170, 17, 17);"> #ffffff;

}

</style>

尝试一下 »

使用 orderBy 过滤器

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

AngularJS 实例

<table>

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

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

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

  </tr>

</table>

尝试一下 »

使用 uppercase 过滤器

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

AngularJS 实例

<table>

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

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

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

  </tr>

</table>

尝试一下 »

显示序号 ($index)

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

AngularJS 实例

<table>

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

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

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

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

  </tr>

</table>

尝试一下 »

使用 $even 和 $odd

AngularJS 实例

<table>

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

<td ng-if="$odd" style=" margin: 0px; padding: 0px; color: rgb(17, 119, 0);">>{{ x.Name }}</td>

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

<td ng-if="$odd" style=" margin: 0px; padding: 0px; color: rgb(17, 119, 0);">>{{ x.Country }}</td>

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

</tr>

</table>

尝试一下 »

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

AngularJS：表格的更多相关文章

  1. 【09】AngularJS 表格

    AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: <div ng-app="myApp" ...

  2. AngularJS 表格

    ng-repeat 指令可以完美的显示表格. 使用 angular 显示表格是非常简单的: <!DOCTYPE html> <html> <head> <me ...

  3. AngularJS表格神器“ui-grid”的应用

    HTML:  (代码仅用于解释得更清楚,并未完全展示) <!doctype html> <html ng-app="app"> <head> & ...

  4. angularJs表格效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  5. Angularjs 表格插件的使用

    对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid. ...

  6. angularjs表格方式显示数据

    <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td&g ...

  7. AngularJS表格排序

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. AngularJS 表格(带有CSS样式)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. AngularJS Bootstrap

    AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...

随机推荐

  1. Software Engineering at Google

    Google的Fergus Henderson在Software Engineering at Google中介绍了Google的软件工程实践. 软件开发 源码仓库 单一源代码仓库,除了核心配置和安全 ...

  2. 在oracle中插入数据报错：ORA-00984列在此处不允许

    这里报错的原因就是当数据类型varchar2时没有使用单引号. 没写单引号,不管是双引号还是什么都没写都会报这个错误.

  3. BZOJ3528: [Zjoi2014]星系调查

    唉,看到这题直接想起自己的Day1,还是挺难受的,挺傻一题考试的时候怎么就没弄出来呢…… 这两天CP让我给他写个题解,弄了不是很久就把这个题给弄出来了,真不知道考试的时候在干嘛. 明天就出发去北京了, ...

  4. display:inline-block 和 float 水平排列区别？

    文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素.而inline-block元素仍在文档流内.因此设置inline-block不需要清除浮动.当然,周围元素不会环 ...

  5. SpringMVC中WebDataBinder的应用及原理

     Controller方法的参数类型可以是基本类型,也可以是封装后的普通Java类型.若这个普通Java类型没有声明任何注解,则意味着它的每一个属性都需要到Request中去查找对应的请求参数.众所周 ...

  6. 理解 EventLoop

    链接 链接 node 浏览器 执行顺序有差异 macrotask microtask 一个线程会有 堆 栈 消息队列;  栈函数执行是用的, 堆用了存放定义的对象, 消息队列来处理异步的操作 a() ...

  7. commond prompt CD

    如果要进入目前所在盘符的其他路径用cd命令可进入,但如果从c盘进入d盘等,是不用cd命令的. 如目前在c盘的任意目录,需要切换到d盘的根目录,用:“d:”命令(不含引号),如图: cd命令简介: 第一 ...

  8. Flask的消息message机制flash

    Flask的消息机制flash message是一个基于session实现的用于保存数据的集合,其特点是:使用一次就删除. 原理就是 操作成功 session['操作'] = 'msg' # 设置 s ...

  9. Leetcode 999. Available Captures for Rook

    class Solution: def numRookCaptures(self, board: List[List[str]]) -> int: rook = [0, 0] ans = 0 f ...

  10. LINUX命令—让人喜爱的find

    FIND命令的让人喜爱的地方在于其后面跟着的 –exec  可以执行其他linux命令 这点太让人高兴了,不过他的结尾要带一个特殊的结构 {} \: 说说实例: