AngularJS 使用 uppercase 过滤器的表格
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1" />
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
<style>
table td {
border:solid 1px grey;
border-collapse:collapse;
padding:10px;
}
table tr:nth-child(odd) {
background-color:#f1f1f1;
}
table tr:nth-child(even) {
background-color:#ffffff;
}
</style>
</head>
<body>
<div class="container"style="padding:50px">
<div data-ng-app="myApp"data-ng-controller="myCtrl">
<table>
<tr data-ng-repeat="x in names | orderBy:'liaohao'">
<td>{{x.liaohao|uppercase}}</td><td>{{x.xinghao}}</td>
</tr>
</table>
</div>
</div>
<script src="jQuery/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("myCtrl", function ($scope, $http) { $http.get("json/json.json").success(function (response) { $scope.names=response.records}) })
</script>
</body>
</html>
json.json
{
"records": [
{
"liaohao": "a03020001",
"xinghao": "FR100-4T-2.2BDRV1"
},
{
"liaohao": "a03020002",
"xinghao": "FR100-4T-2.2BDRV2"
},
{
"liaohao": "a03020003",
"xinghao": "FR100-4T-2.2BDRV3"
},
{
"liaohao": "a03020004",
"xinghao": "FR100-4T-2.2BDRV4"
},
{
"liaohao": "a03020005",
"xinghao": "FR100-4T-2.2BDRV5"
},
{
"liaohao": "a03020006",
"xinghao": "FR100-4T-2.2BDRV6"
},
{
"liaohao": "a03020007",
"xinghao": "FR100-4T-2.2BDRV7"
}
]
}
AngularJS 使用 uppercase 过滤器的表格的更多相关文章
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- AngularJS中自定义有关一个表格的Directive
本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table> <thead> <tr> ...
- 前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- angularjs之filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...
- 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 【angularJS】Filter 过滤器
当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在AngularJS中有常见默认的过滤器,当然若不满足所需,我们可以自定义 ...
- angularjs开发常见问题-2（angularjs内置过滤器）
在angular中内置了几个经常使用的filter,能够简化我们的操作. 过滤器使用 '|' 符号,概念有点相似于linux中的管道. 1.filter (过滤) filter能够依据条件过滤数据.样 ...
- AngularJS中的过滤器
欢迎大家指导与讨论 : ) 一.前言 AngularJS的过滤器能够将数据在被指令处理到显示在视图之前进行处理和转换.而且,过滤器不会修改作用域中的数据本身,即过滤器会保证数据的完整性.这样子能够允许 ...
- AngularJS的date 过滤器
date 过滤器可以将日期格式化成需要的格式.AngularJS中内置了几种日期格式,如果没有指定使用任何格式,默认会采用 mediumDate 格式,下面的例子中展示了这个格式. ·下面是内置的支持 ...
随机推荐
- vsftpd配置文件解析
对vsftpd配置文件详细解答. 1.默认配置: 1>允许匿名用户和本地用户登陆. anonymous_enable=YES local_enable=YES 2>匿名用户使用的登陆名为f ...
- pat09-散列3. Hashing - Hard Version (30)
09-散列3. Hashing - Hard Version (30) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 HE, Qin ...
- Guid和Oracle中16进制字符的转换
我们知道在Oracle中存的guid是16进制字符串,而在我们的C#代码中存的是guid对象,这样我会就要进行转换, 下面给出了两者进行转换的方法: public class Guid2RawProc ...
- node.js async/await 继发执行与并发执行
async/await 继发执行与并发执行,看如何控制 两个异步函数 foo bar function foo() { return new Promise((resolve, reject) =&g ...
- XHR的应用场景
一.简史 IE5.5最早实现XHR,需要通过ActiveXObject创建xhr实例,直到IE7才定义了XMLHttpRequest对象.IE5.5实现XHR之后,其他浏览器紧随其后实现了XHR,直接 ...
- Centos6安装oracle10g
刚刚开始学OCP.第一关,安装,被折腾得稀碎...查询了大量资料,多次失败后终于总结出一些经验,简单整理如下.[2014-12-11 重新整理了一下顺序,修改了脚本!] 需要注意的是:如果想尝试我提供 ...
- selendroid之inspector
http://selendroid.io/inspector.html 寻找元素.断点模式.
- 使用CTE公用表表达式的递归查询（WITH AS）
公用表表达式 (CTE) 具有一个重要的优点,那就是能够引用其自身,从而创建递归 CTE.递归 CTE 是一个重复执行初始 CTE 以返回数据子集直到获取完整结果集的公用表表达式. 当某个查询引用递归 ...
- C# 中关于radiobutton控件的使用
在一个Form窗口中定义了3个radiobutton,radioButton1.radioButton2和radioButton3,以及button1和button2(这里可以是其他控件) 为了实现单 ...
- Linux下创建vue项目
前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...