AngularJS 过滤器

AngularJS 过滤器

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

表达式中添加过滤器

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

(下面的两个实例，我们将使用前面章节中提到的 person 控制器)

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

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

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

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

currency 过滤器

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

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

向指令添加过滤器

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

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

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

过滤输入

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

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

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

自定义过滤器

以下实例自定义一个过滤器 reverse ，将字符串反转：

varapp=angular.module('myApp',[]);app.controller('myCtrl',function($scope){$scope.msg="ez4code";});app.filter('reverse',function(){//可以注入依赖returnfunction(text){returntext.split("").reverse().join("");}});