ylbtech-AngularJS：表格

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、

1、

http://www.runoob.com/angularjs/angularjs-tables.html

2、

6.返回顶部

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

AngularJS：表格的更多相关文章

【09】AngularJS 表格
AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据使用 angular 显示表格是非常简单的: <div ng-app="myApp" ...
AngularJS 表格
ng-repeat 指令可以完美的显示表格. 使用 angular 显示表格是非常简单的: <!DOCTYPE html> <html> <head> <me ...
AngularJS表格神器“ui-grid”的应用
HTML: (代码仅用于解释得更清楚,并未完全展示) <!doctype html> <html ng-app="app"> <head> & ...
angularJs表格效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
Angularjs 表格插件的使用
对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid. ...
angularjs表格方式显示数据
<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td&g ...
AngularJS表格排序
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
AngularJS 表格(带有CSS样式)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
AngularJS Bootstrap
AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...

随机推荐

初探UiAutomator2.0中使用Xpath定位元素
J 今天的主题是讲一下在使用过程中遇到的一个问题,如何在UiAutomator2.0中使用Xpath定位元素? 背景现在的app在打包成apk的时候都是有加固处理的,各种混淆加固,所以已经破坏了或扰 ...
ssh整合学习（1）
Hibernate框架 1 hibernate核心配置文件 (0)orm思想 -对象关系映射 (1)数据库信息 (2)hibernate信息 (3)映射配置 (4)hibernate核心配置文件 -如 ...
mysql数据库(三)：查询的其他用法
一. 查询—IN的用法语法:select ... from 表名 where 字段 a in (值b, 值c, 值d...) 等价于 select ... from 表名 where 字段a=值b ...
创建CMD启动环境
我们可以用一个cmd文件,通过doskey命令模拟linux下的alias,指定一些我们习惯的命令名,比如: env.cmd @echo off doskey alias=doskey /macros ...
Lucene快速入门
1. 什么是lucene lucene是Apache的一个全文检索工具,使用lucene能快速实现全文检索功能.Lucene是一个工具包,你可以调用它的函数, 但它不能独立运行,不单独对外提供服务. ...
Node net模块与http模块一些研究
这周遇到一个有意思的需求,端上同学希望通过 socket 传送表单数据(包含文件内容)到 node 端,根据表单里的文件名.手机号等信息将文件数据保存下来.于是我这样写了一下--socket_serv ...
Xcode And iOS9新特性
Xcode And iOS9 1. Xcode7 新特性 > 可直接在真机上运行自己的应用,只需要有苹果账号,无需购买苹果开发者账号. > 可设置在出现 EXC_BAD_ACCESS 错误 ...
闸流管（或双向可控硅） IGBT 应用
十条规则规则1. 为了导通闸流管(或双向可控硅),必须有门极电流≧IGT ,直至负载电流达到≧IL .这条件必须满足,并按可能遇到的最低温度考虑.规则2. 要断开(切换)闸流管(或双向可控硅),负载电 ...
【python】使用asyncore进行异步通信
参考博文:http://blog.csdn.net/livefun/article/details/8721772 参考博文:https://www.cnblogs.com/tomato0906/ar ...
scrapy 碎片
1.启动命令 2.目录结构 3.文件说明 4.架构图示 5.代码流程参考资料: http://www.cnblogs.com/yangxt90/articles/9021530.html http: ...

AngularJS：表格

AngularJS 表格

在表格中显示数据

AngularJS 实例

废弃声明 (v1.5)

Customers_JSON.php 文件代码：

使用 CSS 样式

CSS 样式

使用 orderBy 过滤器

AngularJS 实例

使用 uppercase 过滤器

AngularJS 实例

显示序号 ($index)

AngularJS 实例

使用 $even 和 $odd

AngularJS 实例

AngularJS：表格的更多相关文章

随机推荐

热门专题