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相关推荐

angularjs 实例_AngularJS过滤器示例教程
angularjs 实例 We looked at View Model, View and Controller concepts in the previous post. Now we are ...
在Angular中有多个字段
本文翻译自:orderBy multiple fields in Angular How to sort by using multiple fields at same time in angula ...
基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...
AngularJS 最佳实践
AngularJS 最佳实践 2013-07-01 17:51 原文简体繁體 61,564 次围观 AngularJS 是一个 Web 应用框架,它实现了前端的 MVC 架构,能让开发人员很方便地 ...
AngularJS之禅
AngularJS是客户端MVC框架,它运行在web浏览器中,有助于我们写单页面.AJAX风格的web应用,是一个通用的框架. AngularJS速成实例:Hello World 首先引用Ang ...
angularjs ngTable -Custom filter template-calendar
jsp页面: <script type="text/ng-template" id="path/to/your/filters/top-Date-One.html& ...
观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（一）
一. phonegap 性能优化以及 phonegap + Angularjs +ionic 1.安装包括:nodejs-cordova-ionic,sdk,phonegap等等: 2.怎样吧导航设 ...
AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...