AngularJS(7)-表格
ng-repeat 指令可以完美的显示表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择框Select</title>
<script src="angular-1.4.1/angular.min.js"></script>
<!--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>
<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>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names|orderBy:'Country'">//使用过滤器orderBy按某一个字段排序
<td>{{$index+1}}</td>//表格显示序号可以在<td>中添加$index
<td ng-if="$even" style="background-color:#f1f1f1">{{x.Name}}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{x.Country|uppercase}}</td>//过滤器uppercase转换成大写
<td ng-if="$even">{{ x.Country }}</td> //$even $odd 奇数偶数判断
</tr>
</table>
</div> </body>
</html>
AngularJS(7)-表格的更多相关文章
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...
- AngularJS：表格
ylbtech-AngularJS:表格 1.返回顶部 1. AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: A ...
- 轻松Angularjs实现表格按指定列排序
angular表格点击序号进行升序,再次点击进行降序排序,在输入框输入信息,出现相对应数据的那一行. html: <input type="text" ng-model=&q ...
- Angularjs中表格的增删改查
在一个管理系统中,不外乎都是增删改查.现在比如有个表格,我想修改当前行的数据,如下图所示 一点击修改的时候,当前页面我需要修改的数据,变成能修改的样式,点击保存能保存当前修改的数据,如下图所示 需要引 ...
- 如何用angularjs制作一个完整的表格之一__创建简单表格
初步接手人生的第一个项目,需要用angularjs制作表格和实现各种功能,因此遇到了各种问题和以前不熟悉的知识点,在此记录下来,以供大家学习交流,解决方式可能并不完善或符合规范,如果大家有更好的方式欢 ...
- 强强联合之jquery操作angularjs对象
jquery是一个非常强大的js框架,angularjs是一个非常牛的前端mvc框架.虽然用其中的任何一个框架在项目中够用了,但是有时候这两个框架需要混合着用,虽然不推荐.但有时候混合用时,却非常方便 ...
- angualrjs学习总结三(http、select、表格、指令以及事件)
一:http XMLHttpRequest:$http是angularjs的一个核心服务,用于读取远程服务器的数据.$http.get(url) 是用于读取服务器数据的函数.举例:<div ng ...
- Angularjs ngTable使用备忘
项目中用到angularjs的表格ng-table,功能相当强大,像搜索.排序.checkbox.分页.每页表格显示数目等都有.API,demo什么的也只能参考官网了.这里做个备忘,哪天肯定还会用到. ...
- AngularJS 表格
ng-repeat 指令可以完美的显示表格. 使用 angular 显示表格是非常简单的: <!DOCTYPE html> <html> <head> <me ...
随机推荐
- JavaScript 中 typeof 知多少？
typeof运算符介绍:typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型.它返回值是一个字符串,该字符串说明运算数的类型. 你知道下面typeof运算的结果吗? typeof(1 ...
- MDIO/MDC(SMI)接口
转载:http://blog.chinaunix.net/uid-24148050-id-132863.html 1. 简介 The MDIO interface is a simple, two-w ...
- javascript 关于语义化作用的理解
看代码实例1 var a=1; function m(a){ //此处为形参第一个传入函数的参数,既为arguments[0] alert(a); //此处a为与形参绑定的 } m(a);//1 此时 ...
- Android SQLite 数据库详细介绍
Android SQLite 数据库详细介绍 我们在编写数据库应用软件时,需要考虑这样的问题:因为我们开发的软件可能会安装在很多用户的手机上,如果应用使用到了SQLite数据库,我们必须在用户初次使用 ...
- Linux vsftpd 无法登录 cannot change directory:xxx priv_sock_get_cmd 问题
配置vsftpd时本地用户无法切换不能登录问题.问题如下: C:\Users\kai>ftp ftp> open 172.24.144.10 连接到 172.24.144.10. (vsF ...
- java中的静态方法
静态方法是属于类的,内存必须为它分配内存空间,这个空间一直由静态方法占用,内存管理器不会由于静态方法没有被调用而将静态方法的存储空间收回,这样如果将所有的方法都声明为静态方法,就会占用大量的内存空间, ...
- ios二维码扫描插件，适配当前主流扫描软件，自定义扫描界面。
二维码介绍: 二维码(QR(Quick Response)code),又称二维条码,最早起源于日本. 它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息 ...
- 【推公式】UVa 10995 - Educational Journey
1A~,但后来看人家的代码好像又写臭了,T^T... Problem A: Educational journey The University of Calgary team qualified f ...
- poj 2186 强连通分支 和 spfa
思路: 建图时,分别建正向图edge和转置图T.用正向图edge来DFS,找出第一个被发现的强连通分支(如果该图存在题目要求的点,那么一定就是第一个被发现的).然后用spfa跑转置图T,判断被发现的点 ...
- oracle 中将字符转换为blob 类型
示例如下: select id,mblx,mbmc,TO_BLOB(UTL_RAW.CAST_TO_RAW(mbsj))mbsj,qyid,qycode from tempuser.temp_cwht ...