Angularjs中如何使用filterFilter函数过滤
程序员文章站
2023-02-19 11:22:10
angularjs的filter,中文名“过滤器”是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东。angularjs中有一个filterfilter函...
angularjs的filter,中文名“过滤器”是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东。angularjs中有一个filterfilter函数用来对集合过滤,非常方便。
源代码大致如下:
function filterfilter(){ return function(aray, expression comparator){ if(!isarray(array)) return array; var comparatortype = typeof(comparator), predicates = [], evaluatedobjects = []; predicates.check = function(value){ for(var j = 0; j < predicates.length; jii){ if(!predicates[j](value){ return false; }) } return true; } if(comparatortype != 'function'{ if(comparatortype === 'boolean' && comparator){ comparator = function(obj, text){ return angular.equals(obj, text); } } else { comparator = function(obj, text){ ... } } }) } }
controller部分如下:
angular .module('app') .controller('mainctrl', ['$scope', function($scope) { $scope.users = $scope.users = [ {name: '', email: '', joined: 2015-1-1} ]; $scope.filter = { fuzzy: '', name: '' }; ... }]);
搜索所有任意字段
<input type="text" ng-model="filter.any" > <tr ng-repeat="user in users | filter: filter.any"> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.joined | date}}</td> </tr>
搜索某个字段
<input type="text" ng-model="filter.name"> <tr ng-repeat="user in users | filter: filter.any | filter: {name: filter.name}"> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.joined | date}}</td> </tr>
如果想name字段完全匹配:
<tr ng-repeat="user in users | filter: filter.any | filter: {name: filter.name}:true"> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.joined | date}}</td> </tr>
搜索时间段
contrlller部分修改为:
angular .module('app') .controller('mainctrl', ['$scope', function($scope) { $scope.users = $scope.users = [ {name: '', email: '', joined: 2015-1-1} ]; $scope.filter = { fuzzy: '', name: '' }; $scope.mindate = new date('january 1, 2000'); $scope.maxdate = new date(); $scope.min = function(actual, expected) { return actual >= expected; }; $scope.max = function(actual, expected) { return actual <= expected; }; }]);
页面部分为:
<input type="text" ng-model="fromdate" data-min-date="{{mindate}}"> <input type="text" ng-model="untildate" data-max-date="{{maxdate}}"> <tr ng-repeat="user in users | filter: filter.any | filter: {name: filter.name} | filter: {joined: untildate}:max | filter: {joined: beforedate}:min"> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.joined | date}}</td> </tr>
以上所述是小编给大家分享的angularjs中如何使用filterfilter函数过滤的相关知识,希望对大家有所帮助。
下一篇: 炒火锅底料要放油吗
推荐阅读
-
pycharm 使用心得(八)如何调用另一文件中的函数
-
巧学巧用:如何使用PHP中的字符串函数_PHP教程
-
如何使用PHP中的字符串函数_php基础
-
sql server关于函数中如何使用Getdate()
-
如何使用PHP中的字符串函数
-
pycharm 使用心得(八)如何调用另一文件中的函数
-
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
-
解析SQL2005中如何使用CLR函数获取行号
-
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
-
AngularJS中如何使用$http对MongoLab数据表进行增删改查