<div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]"> <div ng-repeat="u in myArr | limitTo:"> <p>Name:{{u.name}} <p>Age:{{u.age}} </div> </div>
lowercaseFilter（lowercase）/uppercaseFilter（uppercase）：
方法原型：
复制代码 代码如下:
function(string)
用法：
China has joined the {{ "wto" | uppercase }}. We all need {{ "MONEY" | lowercase }}.
numberFilter（number）:
方法原型：
复制代码 代码如下:
function(number, fractionSize)
用法：
{{ "3456789" | number}} <br /> {{ true | number}} <br /> {{ 12345678 | number:1}}
orderByFilter（orderBy）：
方法原型：
复制代码 代码如下:
function(array, sortPredicate, reverseOrder)
用法：
<div ng-init="myArr = [{name:'Tom', age:, deposit: }, {name:'Tom', age:, deposit: }, {name:'Tom Senior', age:, deposit: }, {name:'May', age:, deposit: }, {name:'Jack', age:, deposit:}, {name:'Alice', age:, deposit: }]"> <!--deposit前面的'-'表示deposit这列倒叙排序，默认为顺序排序 参数reverseOrder：true表示结果集倒叙显示--> <div ng-repeat="u in myArr | orderBy:['name','-deposit']:true"> <p>Name:{{u.name}}</p> <p>Deposit:{{u.deposit}}</p> <p>Age:{{u.age}}</p> <br /> </div> </div>
自定义Filter
和Directive一样，如果内建的Filter不能满足你的需求，你当然可以定义一个专属于你自己的Filter。我们来做一个自己的Filter：capitalize_as_you_want，该Filter会使你输入的字符串中的首字母、指定index位置字母以及指定的字母全部大写。
方法原型：
复制代码 代码如下:
function (input, capitalize_index, specified_char)
完整的示例代码：
<!DOCTYPE> <html> <head> <script src="https://www.jb51.net/Scripts/angular.js"></script> <script type="text/javascript"> (function () { var app = angular.module('ngCustomFilterTest', []); app.filter('capitalize_as_you_want', function () { return function (input, capitalize_index, specified_char) { input = input || ''; var output = ''; var customCapIndex = capitalize_index || -; var specifiedChar = specified_char || ''; for (var i = ; i < input.length; i++) { // 首字母肯定是大写的， 指定的index的字母也大写 if (i === || i === customCapIndex) { output += input[i].toUpperCase(); } else { // 指定的字母也大写 if (specified_char != '' && input[i] === specified_char) { output += input[i].toUpperCase(); } else { output += input[i]; } } } return output; }; }); })(); </script> </head> <body ng-app="ngCustomFilterTest"> <input ng-model="yourinput" type="text"> <br /> Result: {{ yourinput | capitalize_as_you_want::'b' }} </body> </html>
好了，本篇讲了AngularJS中的Filter，看完这篇后，我们可以利用好Filter非常方便的使数据能按我们的要求进行展示，从而使页面变得更生动。
您可能感兴趣的文章: