<!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 过滤器的表格的更多相关文章

  1. 前端MVC学习总结——AngularJS验证、过滤器

    前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...

  2. AngularJS中自定义有关一个表格的Directive

    本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table>    <thead>        <tr>  ...

  3. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  4. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  5. 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  6. 【angularJS】Filter 过滤器

    当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在AngularJS中有常见默认的过滤器,当然若不满足所需,我们可以自定义 ...

  7. angularjs开发常见问题-2（angularjs内置过滤器）

    在angular中内置了几个经常使用的filter,能够简化我们的操作. 过滤器使用 '|' 符号,概念有点相似于linux中的管道. 1.filter (过滤) filter能够依据条件过滤数据.样 ...

  8. AngularJS中的过滤器

    欢迎大家指导与讨论 : ) 一.前言 AngularJS的过滤器能够将数据在被指令处理到显示在视图之前进行处理和转换.而且,过滤器不会修改作用域中的数据本身,即过滤器会保证数据的完整性.这样子能够允许 ...

  9. AngularJS的date 过滤器

    date 过滤器可以将日期格式化成需要的格式.AngularJS中内置了几种日期格式,如果没有指定使用任何格式,默认会采用 mediumDate 格式,下面的例子中展示了这个格式. ·下面是内置的支持 ...

随机推荐

  1. 随机森林（Random Forests）

    简单地看了一些入门的资料. 随机森林似乎和CART有些联系. 随机森林的算法步骤: 1. 利用自助法(Bootstrap)从原始训练集中生成k个自助样本集,每个自助样本集是每棵分类树的全部训练数据.自 ...

  2. H5禁止页面滑动/滚动

    禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否 禁止页面滚动 有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hi ...

  3. Csharp

    c#简介 c#程序结构 c#基本语法 c#数据类型 c#类型转换 c#变量 c#常量 c#运算符 c#判断 c#循环 c#方法 c#简介 C# 是一个现代的.通用的.面向对象的编程语言,它是由微软(M ...

  4. double类型计算

    下面两个例子体现两个运算规则 一.四舍五入 //四舍五入 double doublenum = Math.Round(12.5, MidpointRounding.AwayFromZero); //两 ...

  5. 调试.NET程序OutOfMemoryException (转载)

    原文地址:http://blog.csdn.net/directionofear/article/details/8009427 应用程序调试,需要有个常规的调试思路,应对各类问题最基本的调试手段是什 ...

  6. 前端（三大框架、Bootstrap，jQuery，自整理）

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  7. java实现链表结构详细代码

    一.数据准备 1. 定义节点 2.   定义链表 1.数据部分 2.节点部分 class DATA //数据节点类型 { String key; String name; int age; } cla ...

  8. 快速开始Python/WSGI应用程序

    快速开始Python-wsig应用程序 官方参考文档 安装 uwsgi 安装 pip install uwsgi uwsgi --version # 查看 uwsgi 版本 测试 uwsgi 是否正常 ...

  9. win10安装mxnet cuda9.0-gpu版

    类似于上一篇文章 Anaconda3.6    python3.6.5   cuda9.0+   cudnn7.0 安装MXNet 1.设置清华源 conda config --prepend cha ...

  10. Flask入门邮件同步与异步发送(九)

    ​ 应用场景: 用户在注册或者密码丢失等过程中,账号绑定邮箱,用户在进行身份认证的过程中,电子邮箱确实是一种很常用的方式,Python中提供了smtplib可以实现发送电子邮件功能,Flask框架也有 ...