老旧小区改造国家最新政策,网站seo建设方案,展厅设计与施工,网页版小红书AngularJS中的过滤器是用于对数据的格式化#xff0c;或者筛选的函数#xff0c;可以直接通过以下语法使用#xff1a; {{expression|filter}} {{expression|filter1|filter2}} {{expression|filter1:param1,param2,...|filter2} 过滤器的种类有number#xff0c;currency或者筛选的函数可以直接通过以下语法使用 {{expression|filter}} {{expression|filter1|filter2}} {{expression|filter1:param1,param2,...|filter2} 过滤器的种类有numbercurrencydatejsonlimitTolowercaseuppercasefilterorderBy。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 !DOCTYPE html html ng-appapp head meta charsetutf-8 /head body ng-appapp div ng-controllerController1 p{{1234567890 | number}}/p !--显示1,234,567,890-- p{{1234.56789 | number:3}}/p !--显示1,234.568保留3位小数-- p{{1234.56789 | currency}}/p !--显示$1,234.57货币默认的前缀是美元符号-- p{{1234.56789 | currency:}}/p !--显示1,234.57-- p{{today | date:medium}}/p !--显示Jun 28, 2015 3:45:54 PM-- p{{today | date:short}}/p !--显示6/28/15 3:45 PM-- p{{today | date:fullDate}}/p !--显示Sunday, June 28, 2015-- p{{today | date:longDate}}/p !--显示June 28, 2015-- p{{today | date:shortDate}}/p !--显示6/28/15-- p{{today | date:shortTime}}/p !--显示3:45 PM-- p{{today | date:mediumTime}}/p !--显示3:45:54 PM-- p{{today | date:yyyy-MM-dd HH:mm:ss}}/p !--显示2015-06-28 15:45:54-- p{{[a,b,c,d,e] | limitTo:3}}/p !--显示[a,b,c]截取前3位-- p{{[a,b,c,d,e] | limitTo:-3}}/p !--显示[c,d,e]截取后3位-- p{{Hello World | lowercase}}/p !--显示hello world-- p{{Hello World | uppercase}}/p !--显示HELLO WORLD-- p{{data.phone | filter:le}}/p !--显示[{name:iPhone,company:Apple}]只匹配value值-- p{{data.phone | filter:{company:A} }}/p !--显示[{name:iPhone,company:Apple},{name:HUAWEI P8,company:HUAWEI}]company中有A就会匹配到-- p{{data.phone | orderBy:name}}/p !--显示[{name:Galaxy S5,company:Sumsung},{name:HUAWEI P8,company:HUAWEI},{name:iPhone,company:Apple}]以name的值做排序默认是从小到大排序-- p{{data.phone | orderBy:-name}}/p !--显示[{name:iPhone,company:Apple},{name:Galaxy S5,company:Sumsung},{name:HUAWEI P8,company:HUAWEI}]反序-- p{{[2,24,13,89,3,8,41,9,10] | filter:checkNum}}/p !--自定义的过滤器显示[2,3,8,9,10]定义见90~95行-- /div script src../JS/angular.min.js/script script typetext/javascript angular.module(app, []) .controller(Controller1, function($scope, $filter) { $scope.today new Date; $scope.data { phone: [{ name: iPhone, company: Apple }, { name: Galaxy S5, company: Sumsung }, { name: HUAWEI P8, company: HUAWEI }] }; var jsonString $filter(json)($scope.data); console.log(jsonString); /* console输出json格式的data { phone: [ { name: iPhone, company: Apple }, { name: Galaxy S5, company: Sumsung }, { name: HUAWEI P8, company: HUAWEI } ] } */ //自定义过滤器 $scope.checkNum function(num) { //10的不保留 if (num 10) return false; else return true; } }); /script /body /html 除了上面自定义过滤器的方法外还有两种专门的方法。 第一种 module.filter(name,filterFactory) 第二种 $filterProvider.register(); 第一种的例子 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 !DOCTYPE html html ng-appapp head meta charsetutf-8 /head body ng-appapp div ng-controllerController1 ul !-- 循环输出data里面的数据用自定义的名为filterAge的过滤器过滤 -- li ng-repeatitem in data | filterAge item.name item.age item.position /li /ul /div script src../JS/angular.min.js/script script typetext/javascript angular.module(app, [], function($provide) { //service提供数据 $provide.service(data, function() { return [{ name: Wilshere, age: 23, position: midfield }, { name: Giroud, age: 28, position: striker }, { name: Cech, age: 33, position: goalkeeper }]; }); }) //用.filter的方法定义过滤器 .filter(filterAge, function() { return function(obj) { //obj是过滤前的对象 var newObj []; angular.forEach(obj, function(i) { if (i.age 25) { newObj.push(i); } }); return newObj; } }) .controller(Controller1, function($scope, data) { $scope.data data; }); /script /body /html 第二种的例子 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 !DOCTYPE html html ng-appapp head meta charsetutf-8 /head body ng-appapp div ng-controllerController1 ul !-- 循环输出data里面的数据用自定义的名为filterAge的过滤器过滤 -- li ng-repeatitem in data | filterAge item.name item.age item.position /li /ul /div script src../JS/angular.min.js/script script typetext/javascript angular.module(app, [], function($filterProvider, $provide) { //用注册的方法自定义过滤器 $filterProvider.register(filterAge, function() { return function(obj) { var newObj []; angular.forEach(obj, function(i) { //age大于25的才会输出 if (i.age 25) { newObj.push(i); } }); return newObj; } }); //service提供数据 $provide.service(data, function() { return [{ name: Wilshere, age: 23, position: midfield }, { name: Giroud, age: 28, position: striker }, { name: Cech, age: 33, position: goalkeeper }]; }); }) .controller(Controller1, function($scope, data) { $scope.data data; }); /script /body /html 本文转自 iampomelo 51CTO博客原文链接http://blog.51cto.com/iampomelo/1668754如需转载请自行联系原作者
