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 格式,下面的例子中展示了这个格式. ·下面是内置的支持 ...
随机推荐
- MATLAB-R2015b-win64安装详细教程
1.首先下载以下文件 链接:https://pan.baidu.com/s/1eRAOKZw 密码:5nkj 2.双击R2015b_win64.iso打开(win8,win8.1,win10均可直接打 ...
- Red–black tree ---reference wiki
source address:http://en.wikipedia.org/wiki/Red%E2%80%93black_tree A red–black tree is a type of sel ...
- embedded tomcat运行java web，Unable to compile class for JSP
环境 eclipse:4.5.2 jre:1.8 java project compiler:1.8 embedded tomcat:7.0.32 可以正常启动,但是访问时,会报错. HTTP Sta ...
- 运行jsp时，报错404
The origin server did not find a current reprsentation for the target resource or is not willing to ...
- Csharp: FreeTextbox 编辑器控件运行时错误: 'FTB_ResizeGalleryArea' 未定义
ftb.imagegallery.aspx 改一下代码: <form id="Form1" runat="server" enctype="mu ...
- linux系统设置虚拟内存
1. 情景:centos7源码编译mysql5.7.22时,因为服务器内存不足导致编译失败(源码编译至少需要1G内存).报错信息如下: c++: Internal error: Killed (pro ...
- CRM——讲师与学生
一.课程记录和学习记录 1.初始化 course_record, study_record.2.学习记录3.录入成绩4.显示成绩 ajax 查询 柱状图展示成绩 highcharts 5.上传作业(o ...
- Oracle运行依赖的服务
1.Oracle ORCL VSS Writer Service. Oracle卷映射拷贝写入服务,VSS(Volume Shadow Copy Service)能够让存储基础设备(比如磁盘,阵列等) ...
- Android 解决Glide 加载图片缓慢（第一次加载不出来图片）的Bug
- CSS中的各类选择器
属性选择器 结构性伪类选择器 UI状态伪类选择器 CSS其他选择器