具有多个值的AngularJS滤波器中继器
AngularJS filter repeater with multiple values
我有一个中继器,我需要根据输入到文本字段的文本进行过滤,所以我已经完成了这个
<tr ng-repeat="i in filteredItems = (iso3166 | filter: {alpha_2: countryQuery})">
数据是对象的json数组,$scope.iso3166:
[{
"name": "Afghanistan",
"alpha_2": "AF",
"alpha_3": "AFG",
"country-code": "004",
"iso_3166-2": "ISO 3166-2:AF",
"region": "Asia",
"sub-region": "Southern Asia",
"region-code": "142",
"sub-region-code": "034",
"license": "unclassified",
"prohibited": "unclassified",
"size": "unclassified"
}, ...
所以你可以键入"af"和表格过滤器来显示阿富汗。
现在,我需要让字段中键入的内容不仅与alpha_2
键匹配,还与name
键匹配。例如,"af"不仅应与"阿富汗"匹配,还应与"中非共和国"匹配。
我看了Angular 1.4.1文档,看到了逗号方法,但它似乎执行了and比较。如
<tr ng-repeat="i in filteredItems = (iso3166 | filter: {alpha_2: countryQuery, name: countryQuery })">
在这种情况下,有没有办法做一个"或",这样无论键入什么,都会过滤到查询位于"alpha_2"或"name"中的任何项目?
更新:如果有人好奇,我最终使用了以下答案中建议的过滤器:
$scope.countryFilter = function (value) {
if (angular.isUndefined($scope.countryQuery) || $scope.countryQuery === '') {
return true;
}
return value.name.indexOf($scope.countryQuery) >= 0 || value.alpha_2.indexOf($scope.countryQuery) >= 0;
};
您可以指定一个函数的名称来过滤结果,然后在控制器中实现过滤逻辑,而不是这样做。
<tr ng-repeat="i in filteredItems = (iso3166 | filter: filterFn)">
控制器内:
scope.filterFn = function(item) {
if(//item meets criteria) {
//returning true will put the item into the ng-repeat data
return true;
}
return false;
}
您可以将属性应用于ng重复筛选器,如下所示:
https://jsfiddle.net/pzek3tmy/
控制器
function Controller($scope) {
var vm = this;
vm.regions = [{
"name": "Afghanistan",
"alpha_2": "AF",
"alpha_3": "AFG",
"country-code": "004",
"iso_3166-2": "ISO 3166-2:AF",
"region": "Asia",
"sub-region": "Southern Asia",
"region-code": "142",
"sub-region-code": "034",
"license": "unclassified",
"prohibited": "unclassified",
"size": "unclassified"
}, {
"name": "Germany",
"alpha_2": "GN",
"alpha_3": "AFG",
"country-code": "004",
"iso_3166-2": "ISO 3166-2:AF",
"region": "Asia",
"sub-region": "Europe",
"region-code": "143",
"sub-region-code": "034",
"license": "unclassified",
"prohibited": "unclassified",
"size": "unclassified"
}];
}
HTML
<div ng-controller="Controller as ctrl">
<input type="text" ng-model="region_filter">
<ul>
<li ng-repeat="region in ctrl.regions | filter:{'alpha_2':region_filter} | filter:{'name':region_filter}">{{region.name}} </li>
</ul>
</div>
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- AngularJS:我可以跳过函数参数回调吗
- AngularJS UI路由器不能像ng路由器那样工作
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 如何包含特定于每个视图angularjs的javascript文件
- AngularJS:ng之后,重复$scope值未按预期更新
- AngularJS-在JSON选择器中使用变量名
- $window.ga在AngularJS事件中未定义
- AngularJS-使用'true'属性
- 打开一个模态并将其链接到AngularJS中的指令
- Angularjs代码未在匿名函数中运行
- angularjs+rails应用程序中未显示模板
- 具有多个值的AngularJS滤波器中继器
- Angularjs:在数组上映射角度滤波器
- AngularJS “ng-repeat |滤波器:..“没有像我预期的那样工作(不显示任何数据)
- 控制器中的AngularJS滤波器阵列
- AngularJs滤波器“;插值时出错”;
- AngularJS基于索引的滤波器阵列
- angularjs滤波器错误
- angularjs:在ng重复中检查滤波器的长度