AngularJS Filters
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
AngularJS 过滤器
AngularJS 过滤器可用于转换数据:
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
表达式中添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。.
((下面的两个实例,我们将使用前面章节中提到的 person 控制器))
uppercase 过滤器将字符串格式化为大写:
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ fullName() | uppercase }}</p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
结果为:姓名为 JOHN DOE
lowercase 过滤器将字符串格式化为小写:
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | lowercase }}</p>
</div>
结果为:姓名为 john doe
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> <script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
</script>
结果如图所示:

向指令添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。
orderBy 过滤器根据表达式排列数组:
<div ng-app="myApp" ng-controller="namesCtrl"> <p>循环对象:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul> </div> <script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
</script>
结果:
循环对象:
- Kai, Denmark
- Jani, Norway
- Hege, Sweden
过滤输入
<div ng-app="myApp" ng-controller="namesCtrl"> <p>输入过滤:</p> <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> <script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
</script>
结果如图所示:当输入k时,会过滤掉其他的。

转载地址:http://www.runoob.com/angularjs/angularjs-filters.html
AngularJS Filters的更多相关文章
- 【07】AngularJS Filters
AngularJS Filters 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency[ˈk ...
- 简单介绍AngularJs Filters
网站链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filters/ Filter作用就是接收一个输入,通过某 ...
- Part 8 AngularJS filters
Filters in angular can do 3 different things 1. Format data 2. Sort data 3. Filter data Filters can ...
- 6.使用AngularJS模板来创建视图
AngularJS模板包含定义了额外的功能,对DOM元素行为的表达式,过滤器和指令. 1.了解模板 表达式:类似js的代码段.在作用域的上下文被求值.可以放置在普通的HTML文本或属性值中 <p ...
- Angularjs 使用filter格式化输出href
工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的,格式是{{ expression | ...
- AngularJS基础总结
w3shools angularjs教程 wiki <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...
- AngularJS Notes
ng-app The ng-app directive tells AngularJS that the <div> element is the "owner" of ...
- Angularjs 1 使用filter格式化输出href
Angularjs版本: 1.3.5 工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的, ...
- 在 Angular 中实现搜索关键字高亮
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...
随机推荐
- JavaScript事件对象
一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...
- asp.net中控制反转的理解
对IOC的解释为:“Inversion of control is a common characteristic of frameworks, so saying that these lightw ...
- scroll事件实现监控滚动条并分页显示示例(zepto.js)
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
- Javascript的历史
阅读了JavaScript dom简史,从网上看了下,学问很深啊. 首先简单说下网景公司(Netscape)的发展史:1993年,美国国家超级计算机应用中心(NCSA),发表了一个浏览器,命名为“Mo ...
- Swift获取屏幕快照
// 获取屏幕快照 private func screenShot() -> UIImage{ let window = UIApplication.shared.keyWindow! UIGr ...
- android加固系列—5.加固前先学会破解,hook(钩子)jni层系统api
[版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5138585.html] crackme项目jni的关键代码(项目地址见文章底部),获取当前程序 ...
- 复杂sql分组查询 ( pivot)
一个数据表里面字段有年.月.日.金额.支付方式等字段,然后现在想写个sql语句,把每一天的每种支付方式金额(支付方式有多重)排在同一行, 最后在增加一列小计当前的所有支付方式的金额.如下图: 原sql ...
- Android TextView 高亮字体并添加点击事件
运行效果 package com.zutil.lib; import android.graphics.Typeface; import android.os.Bundle; import andro ...
- Android 播放在线视频
首先开启电脑上的tomcat,将视频文件放在Tomcat 7.0\webapps\ROOT中 不用修改代码,直接输入地址即可,运行如下: 播放在线视频,必须要求手机支持当前的格式,才可以播放 播放的原 ...
- 在eclipse中把之前的Tomcat 6删掉,不能再建
在eclipse中把之前的Tomcat 6删掉,重新配置一个,不料没有下一步. 解决的方法了,如下: 1.退出 eclipse 2.到[工程目录下]/.metadata/.plugins/org.ec ...