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 ...
随机推荐
- UNIX基础知识之文件和目录
程序清单1-1 列出一个目录中的所有文件(ls命令的简要实现): [root@localhost unix_env_advance_prog]# cat prog1-.c #include " ...
- 【不怕坑】之 Node.js加密 C#解密
本人也不太了解AES加密解密,为了解决Node.js加密,但是无法C#解密的问题,在网上搜了大量的相关文章. 但是多数是Node.js vs Java 或 Java vs C#的双向加密解密代码,但是 ...
- iframe自适应高度的多种方法方法小结
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...
- Spark之路 --- Windows Scala 开发环境安装配置
JDK安装 JDK安装包下载 到Oracle官网下载JDK. 传送门 下载之前要记得勾选上同意协议然后选择相应的版本(Windows/Linux, 32/64) JDK安装及验证 按提示完成安装,安装 ...
- XML 之 与Json或String的相互转换
1.XML与String的相互转换 [1] XML 转为 String //载入Xml文件 XmlDocument xdoc = new XmlDocument(); xdoc.Load(" ...
- cocos2d-x3.x使用rapidjson
rapidjson效率高,所以之前cocostudio里面解析用的jsoncpp也换成了rapidjson. 引擎又带有rapidjson库,所以不用单独去下载,直接就可以用. 这里主要写一下关于解析 ...
- 用DAEMON TOOLS打开rational ross 的bin文件并安装过程梳理
最近要开始准备毕业设计了,学习熟悉了一些UML用例图.类图之类的,开始准备用自家PC电脑画图的时候发现Rational Ross没安装. 本以为简单,却碰上bin文件.琢磨好久,终于把Ross安上了. ...
- MYSQL基础笔记(一)
关系型数据库概念: 1.什么是关系型数据库? 关系型数据库:是一种建立在关系模型(数学模型)上的数据库 关系模型:一种所谓建立在关系上的模型. 关系模型包含三个方面: 1.数据结构:数据存储的问题,二 ...
- 给jdk写注释系列之jdk1.6容器(6)-HashSet源码解析&Map迭代器
今天的主角是HashSet,Set是什么东东,当然也是一种java容器了. 现在再看到Hash心底里有没有会心一笑呢,这里不再赘述hash的概念原理等一大堆东西了(不懂得需要先回去看下Has ...
- rpm命令使用说明
RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序” rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种 ...