<!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. ubuntu安装卸载软件

    sudo apt-get remove nagios3 #卸载软件 sudo apt-get autoremove #卸载依附软件包 rpm格式 安装:rpm -ivh *** 查看:rpm -q * ...

  2. net 预览文件 转换文件

    预览SWF文件 swfobject.js  (google浏览器 会阻止 需设置) @{ ViewBag.Title = "PdfPreview"; Layout = " ...

  3. rabbitmq 命令&& rabbitmq教程（一）

    先来个官方教程 http://www.rabbitmq.com 在windows 下 命名 去掉sudo 我是在windows下测试 用net调用 常用命令 控制台命令:sudo rabbitmqct ...

  4. SpringSecurity 3.2入门（7）自定义权限控制介绍

    总结Spring Security的使用方法有如下几种: 一种是全部利用配置文件,将用户.权限.资源(url)硬编码在xml文件中. 二种是用户和权限用数据库存储,而资源(url)和权限的对应关系硬编 ...

  5. unity3D使用C#遍历场景内所有元素进行操作

    最近入门Unity3D,跟着教程做完了survival射击游戏,就想加一个功能,就是按一个按钮屏幕上的怪物都清空. 如图右下角所示. 我的方法是赋予所有怪物一个标签Tag,然后根据标签销毁Gameob ...

  6. JSON.stringify使用

    基本使用 JSON.stringify(value[, replacer [, space]]) value 将要序列化成 一个JSON 字符串的值. replacer 可选 如果该参数是一个函数,则 ...

  7. Disruptor之粗糙认识

    一 概述 1.Disruptor Disruptor是一个高性能的异步处理框架,一个“生产者-消费者”模型. 2.RingBuffer RingBuffer是一种环形数据结构,包含一个指向下一个槽点的 ...

  8. IOS微信浏览器点击事件不起作用问题

    问题: $(document).on("click",".btn",function(){alert("1")}); 在微信浏览器上点击不起 ...

  9. 软件项目技术点(2)——Canvas之坐标系转换

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为 ...

  10. JavaScript数组常见操作

    JavaScript数组常见操作 Tip: 右键在新标签中打开查看清晰大图 下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作 创建数组 一般使用数组字面量[ ...