<!DOCTYPE html> <html ng-app="shoppingModule"> <head> <title></title> <script src="angular.min.js" type="text/javascript"></script> <script> var shoppingModule = angular.module("shoppingModule", []); shoppingModule.factory("Items", function () { var items = {}; items.query = function () { return [ { name: 'Jackey', age: 25 }, { name: 'Cassi', age: 20 }, { name: 'uuuuujC', age: 1.2 } ]; }; return items; }); //过滤器 shoppingModule.filter("titleCase", function () { var titleCase = function (input) { return input.charAt(0).toUpperCase() + input.slice(1); }; return titleCase; }); shoppingModule.controller("shoppingController", function ($scope, Items) { $scope.Items = Items.query(); }); </script> </head> <body> <div ng-controller="shoppingController"> search:<input ng-model="query" /> <ul> <li ng-repeat="item in Items|filter:query"> {{item.name | titleCase}} </li> </ul> </div> </body> </html>
加多一个排序
<!DOCTYPE html> <html ng-app="shoppingModule"> <head> <title></title> <script src="angular.min.js" type="text/javascript"></script> <script> var shoppingModule = angular.module("shoppingModule", []); shoppingModule.factory("Items", function () { var items = {}; items.query = function () { return [ { name: 'Jackey', age: 25 }, { name: 'Cassi', age: 34 }, { name: 'uuuuujC', age: 12 } ]; }; return items; }); //过滤器 shoppingModule.filter("titleCase", function () { var titleCase = function (input) { return input.charAt(0).toUpperCase() + input.slice(1); }; return titleCase; }); shoppingModule.controller("shoppingController", function ($scope, Items) { $scope.Items = Items.query(); }); </script> </head> <body> <div ng-controller="shoppingController"> search:<input ng-model="query" /> <select ng-model="orderByy"> <option value="name">name</option> <option value="age">age</option> </select> <ul> <li ng-repeat="item in Items|filter:query | orderBy:orderByy"> {{item.name | titleCase}} {{item.age}} </li> </ul> </div> </body> </html>
模块注入式：
<!DOCTYPE html > <html> <head> <title></title> <script src="angular.min.js" type="text/javascript"></script> </head> <body> <div ng-app="filte" ng-controller="filterController"> {{name | titleCase}} </div> <script> var filterService = angular.module("filterService", []); filterService.filter("titleCase", function () { var titleCase = function (input) { return input.toUpperCase(); }; return titleCase; }); var filte = angular.module("filte", ["filterService"]); filte.controller("filterController", function ($scope) { $scope.name = "jackey"; }); </script> </body> </html>
//1 currency（货币处理）
// 默认为美元符号 可修改为 {{2345 | currency:"RMB"}}
//2 date (日期格式化)
//原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般的格式化要求。用法如下：
//{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
//3 filter （匹配） {{childrenArray | filter:"a"}}
//4 json格式化 {{jsonTest|json}}
//5 limitTo 限制长度 {{ddd|2}}
//6 lowercase(小写)
//7 uppecase(大写)
//8 number(格式化数字) {{3333333|number:2}} 实现千位分割 ，保留小数点后2位
//9 orderBy 排序 {{ childrenArray | orderBy : 'age' }}
filter的格式一般都为
myApp.filter("filterName",function(){
return function(text){
return text;
};
});
factory inject data into filter
<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ng-app="demo"> <head> <title></title> <script src="angular.min.js" type="text/javascript"></script> </head> <body ng-controller="demoController"> <input type="text" ng-model="data.message" /> <pre>{{data.message}}</pre> <input type="text" ng-model="data.message" /> <pre>{{data.message | reversee}}</pre> </body> <script> var demo = angular.module("demo", []); demo.controller("demoController", function ($scope, Data) { $scope.data = Data; }); demo.factory("Data", function () { return {message:"Jackey"}; }); demo.filter("reversee", function (Data) { return function (test) { return test.split("").reverse().join("") + " Inject Data " + Data.message; }; }); </script> </html>