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. 使用springmvc的时候报错NoSuchBeanDefinitionException: No qualifying bean of type

    NoSuchBeanDefinitionException: No qualifying bean of type 其实我至今都不知道错误的根源在哪里,<context:component-sc ...

  2. 绘制三角形（sass）

    绘制三角形 /// draw triangle/// @param {type} $type [''] - triangleUp triangleDown triangleLeft triangleR ...

  3. 牛客比赛-Wannafly9-A/B/C

    A-链接:https://www.nowcoder.com/acm/contest/71/A来源:牛客网 给定n个正整数,请找出其中有多少个数x满足:在这n个数中存在数y=kx,其中k为大于1的整数 ...

  4. WAF 强化学习

    参考:https://github.com/duoergun0729/3book/tree/master/code/gym-waf 代码: wafEnv.py #-*- coding:utf-8 –* ...

  5. day5-shelve模块

    一.概述 前面章节我们讲述了json和pickle模块的序列化和反序列化处理,他们有一个不足是在python 3中不能多次dump和load,shelve模块则可以规避这个问题.shelve模块是一个 ...

  6. wc.exe(c语言实现）

    Github项目地址:https://github.com/zhongciting2009/wc WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写 ...

  7. 【爬虫】beautiful soup笔记（待填坑）

    Beautiful Soup是一个第三方的网页解析的模块.其遵循的接口为Document Tree,将网页解析成为一个树形结构. 其使用步骤如下: 1.创建对象:根据网页的文档字符串 2.搜索节点:名 ...

  8. Ubuntu語言支持爲灰色修復方法

    Ubuntu語言支持爲灰色修復方法 在Ubuntu12.04中,在下不知爲何將 語言支持 中 應用到整個系統 和 添加語言 這2個按弄成了灰色,導致ibus不能輸入中文,現在唔將修復方法公告天下: 1 ...

  9. lzugis——Arcgis Server for JavaScript API之自定义InfoWindow

    各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...

  10. Comparing Xamarin and Delphi XE5 to Xcode for Cross Platform Mobile App Development

    Comparing Xamarin and Delphi XE5 to Xcode for Cross Platform Mobile App Development If you are consi ...