AngularJS Filters

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

过滤器	描述
currency[ˈkɜ:rənsi]	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

<div ng-app="myApp" ng-controller="personCtrl">
FirstName:<input type="text" ng-model="firstName"><br>
LastName:<input type="text" ng-model="lastName"><br>
<br>
FullName:{{firstName +" "+ lastName}}
</div>
<script src="personController.js"></script>

personController.js

angular.module('myApp',[]).controller('personCtrl', function($scope){
$scope.firstName ="John",
$scope.lastName ="Doe",
$scope.fullName = function(){
return $scope.firstName +" "+ $scope.lastName;
}
});

uppercase 过滤器将字符串格式化为大写：

<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为{{ lastName | uppercase }}</p>
</div>

lowercase 过滤器将字符串格式化为小写：

<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为{{ lastName | lowercase }}</p>
</div>

currency 过滤器

currency 过滤器将数字格式化为货币格式：

<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>总价={{(quantity * price)| currency }}</p>
</div>

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组：

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name +', '+ x.country }}
</li>
</ul>
<div>

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{(x.name | uppercase)+', '+ x.country }}
</li>
</ul>
</div>

魔芋练习：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

<meta http-equiv="Cache-Control" content="no-siteapp"/>

<title>moyu demo</title>
<meta name="keywords" content="demo 测试魔芋">
<meta name="description" content="魔芋的测试示例">
<meta name="robots" content="index,follow">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<style>
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="firstName">
<input type="text" ng-model="lastName">
<p>{{firstName +' '+ lastName}}</p>
<p>{{firstName|uppercase}}</p>
<p>{{price|currency}}</p>
<ul>
<li ng-repeat="x in moyuList|orderBy:'country'">
{{x.name+","+ x.country}}
</li>
</ul>
<p>filter</p>
<p>
<input type="text" ng-model="test">
</p>
<ul>
<li ng-repeat="x in moyuList | filter:test | orderBy:'country'">
{{x.name+","+ x.country}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.firstName ="mo";
$scope.lastName ="yu";
$scope.price =123;
$scope.moyuList =[{
name:"上海",
country:"2上海市"
},{
name:"湖北",
country:"1武汉"
},{
name:"湖南",
country:"3长沙"
}]
})
</script>
</body>
</html>

结果：

【07】AngularJS Filters的更多相关文章

SSAS系列——【07】多维数据（查询Cube）
原文:SSAS系列——[07]多维数据(查询Cube) 1.什么是MDX? MDX叫做"多维表达式",是一种查询语言,是一种和SQL类似的查询语言,它基于 XML for Anal ...
【西祠日志】【07】努力努力，找资料，思考，怎么做asp图片上传
[西祠日志][07]努力努力,找资料.思考.怎么做asp图片上传 (2015.07.23周四) 今天忘了带本子.直接写在书上了笔记,晚点还是夹在本子里. 学了这么久的web应用,一直都没时间去做一点 ...
【07】像使用命令行一样使用 GitHub URL
[07] 像使用命令行一样使用 GitHub URL 既然说到了 URL,那么久接着聊一下.使用 UI 浏览 GitHub 很方面也很好,不过很多时候最快的方式是使用 URL 来浏览.举个例子,如果 ...
【07】Firebug监控网络情况
[07] Firebug监控网络情况 Firebug可以监控网页中每个文件加载的时间. 打开Firebug.点击"网络",然后确定已经启用,重新载入当前页面.Firebug显示如下 ...
【07】QQ群管理公告小结：
[07]QQ群管理公告小结: 01,请看公告遵守相关规定. 02,群内除QQ自带的缺省表情外(不是QQ的VIP或大图表情),禁止发送大表情,大图片(展示问题的屏幕截图除外), 03,修改群名片 ...
【07】循序渐进学 docker：数据持久化
写在前面的话学到这里相信有心的朋友都发现问题了,我们每次都会去删掉容器,在创建新的容器.那数据怎么办?岂不删库跑路了? 就算不是数据库,假设公司有日志保留的需求,那每一次发布岂不日志都被干掉了? D ...
【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下通常大家在 ...
【面试】【Spring常见问题总结】【07】
[常见面试问题总结文件夹>>>] 61.Spring IoC容器的依赖有两层含义: Bean依赖容器:也就是说Bean要依赖于容器,这里的依赖是指容器负责创建Bean并管理Bean的 ...
【转】AngularJS 取消对 HTML 片段的转义
今天尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本,如果直接使用 data-ng-b ...

随机推荐

Linux压缩命令（zip/gz/bz2/tar/tar.gz/tar.bz2）
一.Linux的压缩格式 .zip . gz . bz2 .tar 1..zip格式(Linux和Windows是可以互传的) 压缩命令语法:zip 文件名.zip 文件名 ------压缩 ...
json返序列化
ASP.NET中JSON的序列化和反序列化 http://www.cnblogs.com/zhaozhan/archive/2011/01/09/1931340.html 迟来的Json反序列化 ht ...
洛谷P4887 第十四分块(前体)（二次离线莫队）
题面传送门题解 lxl大毒瘤我们考虑莫队,在移动端点的时候相当于我们需要快速计算一个区间内和当前数字异或和中$1$的个数为$k$的数有几个,而这个显然是可以差分的,也就是\([l,r]\ ...
zabbix详细介绍及其自动动态发现
zabbix3.2.1 第1章安装 1.1 查看系统环境 [root@centos7-2 ~]# [root@centos7-2 ~]# hostname -I 10.0.0.10 172.16.1 ...
python自动化学习笔记11-自动化测试UTP框架
前面基本的unittest及ddt已经学过了,现在我们系统把这些知识结合起来,写一个简单的UTP自动化测试框架: 我们先来建基础目录,首先新建一个项目,项目下建父目录UTP,conf目录,用来存放配置 ...
简单几何(水）BestCoder Round #50 (div.2) 1002 Run
题目传送门 /* 好吧,我不是地球人,这题只要判断正方形就行了,正三角形和正五边形和正六边形都不可能(点是整数). 但是,如果不是整数,那么该怎么做呢?是否就此开启计算几何专题了呢 */ /***** ...
题解报告：poj 1321 棋盘问题（dfs）
Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...
275 H-Index II H指数 II
这是 H指数进阶问题:如果citations 是升序的会怎样?你可以优化你的算法吗? 详见:https://leetcode.com/problems/h-index-ii/description/ ...
初识mybatis之入门案例
我也是自学了一下,在idea中基于maven的mybatis的配置.有什么不对的地方,请指正,谢谢. 1.1咋们先来配置测试一下,配置mybatis的图解: 1.2 pom.xml需要mybatis的 ...
md5加密、Des加密对称可逆加密、RSA非对称可逆加密、https单边验证、银行U盾双边认证
1.md5不可逆的加密方式,加密成一个32位的字符串.算法是公开的,任何语言的加密结果都是一样的.总有可能是重复的. 用途: (1)防止明文存储:可以用作密码加密 ...

【07】AngularJS Filters