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. JDK_环境变量

    1. 在系统环境变量中设置: ClASSPATH中输入: ".;C:\Program Files\Java\jdk1.7.0_07\jre\lib\rt.jar;"//java的安 ...

  2. 缓存技术内部交流_01_Ehcache3简介

    参考资料: http://www.ehcache.org/documentation/3.2/getting-started.html http://www.ehcache.org/documenta ...

  3. 20165332 预备作业三 Linux安装及命令入门

    Linux安装及命令入门 一.安装Linux操作系统 由于做的比较晚,结合大多数同学的经验和娄老师的<基于VirtualBox虚拟机安装Ubuntu图文教程>,整个安装过程还算顺利,唯一遇 ...

  4. idea常用插件

    1.  装逼插件 1.1  activate-power-mode   其设置在菜单栏window——active-power-mode下设置颜色是否显示,窗口是否晃动等等 1.2  Backgrou ...

  5. Light oj 1074 spfa

    https://vjudge.net/problem/LightOJ-1074 首先吐槽一个单词,directional是有方向的,undirectional是无向的,这个unidirectional ...

  6. 关于inline函数

    本文为大便一箩筐的原创内容,转载请注明出处,谢谢:http://www.cnblogs.com/dbylk/p/4975474.html 今天我在优化公司项目代码的过程中,借助了Intel的VTune ...

  7. listView使用小技巧P66--P76

    1.设置分割线高度和颜色 android:divider="@android:color/darker_gray" android:dividerHeight="10dp ...

  8. LeetCode OJ：Excel Sheet Column Number（表格列数）

    Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, retur ...

  9. dubbo常见报错

    1. java.io.IOException: Can not lock the registry cache file C:\Users\Administrator\.dubbo\dubbo-reg ...

  10. poi自定义颜色设置（转）

    原文链接  http://javapolo.iteye.com/blog/1604501 最近在项目的开发中使用到了apache poi,该组件可以让我们方便的操作excell,该工具非常容易上手,但 ...