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 ...
随机推荐
- [带你飞]一小时带你学会Python
1.面向的读者: 具有Javascript经验的程序猿. 2 快速入门2.1 Hello world 安装完Python之后,打开IDLE(Python GUI) , 该程序是Python语言解释器, ...
- linux的rpm命令
rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种.二进制包可以直接安装在计算机中,而源代码包将会由 RPM自动编译.安装.源代码包经常以src.rpm作为后缀名. 常用命令组 ...
- 10+ commonly using find command switches with example Unix/Linux
http://crybit.com/find-command-usage-with-example-unixlinux/ find command is one of the best search ...
- Helpers\GeoCode
Helpers\GeoCode This function connects to google maps and retrieves the lat/lon of the address provi ...
- 小白日记26：kali渗透测试之提权（六）--收集敏感信息，隐藏痕迹
提权后操作 提权之后,要收集目标系统的重要信息LINUX /etc/resolv.conf #查看DNS配置,是否可以进行DNS篡改或劫持 /etc/passwd #存放账 ...
- B - Plane of Tanks: Pro
Description Vasya has been playing Plane of Tanks with his friends the whole year. Now it is time to ...
- (转载)ubuntu创建、删除文件及文件夹，强制清空回收站方法
mkdir 目录名 => 创建一个目录 rmdir 空目录名 => 删除一个空目录 rm 文件名 文件名 => 删除一个文件或多个文件 rm –rf 非 ...
- python(1) - 第一个程序 Hello World!
进入python3的解释器环境. 我们让解释器输出 “Hello World!” 解释器成功的输出了Hello world! 程序就这样完成了. 当然上面的程序我们是在解释器中完成的. 我们可以通过 ...
- 关于Eclipse的Save时的自定义操作
Eclipse中Save+S的时候会包含很多其他操作.例如代码格式化,自动导入或者删除jar包等等. 如果修改代码的时候不想让Eclipse做这些操作,有两种方法. 第一: 用一个文本编辑器打开这个文 ...
- 【贪心+一点小思路】Zoj - 3829 Known Notation
借用别人一句话,还以为是个高贵的dp... ... 一打眼一看是波兰式的题,有点懵还以为要用后缀表达式或者dp以下什么什么的,比赛后半阶段才开始仔细研究这题发现贪心就能搞,奈何读错题了!!交换的时候可 ...