<!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. 记一次MongoDB性能问题

    下面文章转载自火丁笔记,原作者描述了一次MongoDB数据迁移过程中遇到的性能问题及其解决方案,中间追查问题的方法和工具值得我们学习.下面是其原文: 最近忙着把一个项目从MySQL迁移到MongoDB ...

  2. How to Configure Tomcat/JBoss and Apache HTTPD for Load Balancing and Failover

    http://java.dzone.com/articles/how-configure-tomcatjboss-and In this post we will see how to setup a ...

  3. Java入门系列-10-数组

    这篇文章为你搞懂2个问题 1.什么是数组,数组是干嘛用的? 2.数组如何使用? 考试结束后,老师给二狗安排了一项任务,统计班里40名同学的平均分.按照我们之前的做法,我们可以定义40个变量然后再相加除 ...

  4. SpringBoot | 第三十四章：CXF构建WebService服务

    前言 上一章节,讲解了如何使用Spring-WS构建WebService服务.其实,创建WebService的方式有很多的,今天来看看如何使用apache cxf来构建及调用WebService服务. ...

  5. nopCommerce 3.9 版本发行

    NopCommerce中文信息地址:http://www.nopcn.com/nopcommerce39-blog-release-notes.html NopCommerce英文地址:http:// ...

  6. bootstrap-fileinput参数

    <link rel="stylesheet" href="css/bootstrapCSS/bootstrap.min.css"> <link ...

  7. mysql多表条件更新

    有两张表bas_student.bas_householder, 去除学生表中与家长表重复的手机号 UPDATE bas_student a,bas_householder b SET a.mobil ...

  8. js之strict模式

    JavaScript在设计之初,为了方便初学者学习,并不强制要求用var申明变量.这个设计错误带来了严重的后果:如果一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量: i = 10 ...

  9. iOS开发之GCD基础

    重新回顾.学习GCD.Block.先贴出一篇不错的讲解GCD基础使用的文章 原文地址:http://blog.csdn.net/aolan1108/article/details/17283415 做 ...

  10. scss-数据类型

    scss当前支持七种主要数据类型 (1).数字,1, 2, 13, 10px. (2).字符串,有引号字符串与无引号字符串,"foo", 'bar', baz. (3).颜色,bl ...