角度按条件过滤数组中的多个项目
angular filter multiple item in array by criteria
尝试创建一个过滤器,当单击名称时会显示该特定名称:
{'username': 'julio', 'status': 'created'}, {'username': 'julio', 'status': 'running'}.
然后,如果单击某个条件,则仅显示具有该条件的一个对象:
{'username': 'julio', 'status': 'created'}
请普伦克尔:http://plnkr.co/edit/qDUvvBWQtNrLTLgSC8Yq?p=preview
angular.module('app', [])
.controller('Ctrl', function ($scope) {
$scope.users = [
{'username': 'julio', 'status': 'created'},
{'username': 'julio', 'status': 'running'},
{'username': 'phillip', 'status': 'running'},
{'username': 'mats', 'status': 'created'}
];
$scope.filtered = [];
$scope.optionProp = '';
$scope.includeItem = function(item, prop) {
$scope.optionProp = prop;
var idx = $scope.filtered.indexOf(item);
if (idx > -1) {
$scope.filtered.splice(idx, 1);
} else {
$scope.filtered.push(item);
}
}
$scope.filterFn = function(item) {
if ($scope.filtered.length > 0) {// first time
console.info( $scope.filtered.length > 0 );
if ($scope.filtered.indexOf(item[$scope.optionProp]) < 0){
console.warn( $scope.filtered.indexOf(item.username ) );
return;
}
}
return item;
}
})
.filter("unique", function () {
return function (data, propertyName) {
if (angular.isArray(data) && angular.isString(propertyName)) {
var results = [];
var keys = {};
for (var i = 0; i < data.length; i++) {
var val = data[i][propertyName];
if (angular.isUndefined(keys[val])) {
keys[val] = true;
results.push(val);
}
}
return results;
} else {
return data;
}
}
});
<body ng-controller="Ctrl">
<div ng-repeat="user in users | unique:'username'">
<input type="checkbox" ng-click="includeItem(user, 'username')" /> {{user}}
</div>
<hr />
<div ng-repeat="s in users | unique:'status'">
<input type="checkbox" ng-click="includeItem(s, 'status')"/> {{s}}
</div>
<ul>
<li ng-repeat="u in users | filter:filterFn">
<p>{{u.username}}</p>
<p>{{u.status}}</p>
</li>
</ul>
</body>
这是工作演示。我已将optionProp
更改为数组以保存多个属性更改,并相应地修改了includeItem
和filterFn
。
<!DOCTYPE html>
<html ng-app="app">
<head>
<style>
li {outline: 2px solid gray; padding: 5px; list-style: none;}
</style>
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script>
'use strict'
angular.module('app', [])
.controller('Ctrl', function ($scope) {
$scope.users = [
{'username': 'julio', 'status': 'created'},
{'username': 'julio', 'status': 'running'},
{'username': 'phillip', 'status': 'running'},
{'username': 'mats', 'status': 'created'}
];
$scope.filtered = [];
$scope.optionProp = [];
$scope.includeItem = function(item, prop) {
var idx = $scope.filtered.indexOf(item);
if (idx > -1) {
$scope.filtered.splice(idx, 1);
var idy = $scope.optionProp.indexOf(prop);
$scope.optionProp.splice(idy, 1);
} else {
$scope.filtered.push(item);
$scope.optionProp.push(prop);
}
}
$scope.filterFn = function(item) {
if ($scope.filtered.length > 0) {// first time
console.info( $scope.filtered.length > 0 );
for (var i = 0; i < $scope.optionProp.length; i++) {
if ($scope.filtered.indexOf(item[$scope.optionProp[i]]) < 0){
console.warn( $scope.filtered.indexOf(item.username ) );
return;
}
}
}
console.log( item );
return item;
}
})
.filter("unique", function () {
return function (data, propertyName) {
if (angular.isArray(data) && angular.isString(propertyName)) {
var results = [];
var keys = {};
for (var i = 0; i < data.length; i++) {
var val = data[i][propertyName];
if (angular.isUndefined(keys[val])) {
keys[val] = true;
results.push(val);
}
}
return results;
} else {
return data;
}
}
});
</script>
</head>
<body ng-controller="Ctrl">
<div ng-repeat="user in users | unique:'username'">
<input id="inputuser" type="checkbox" ng-model="input.chkUser" ng-click="includeItem(user, 'username')" /> {{user}}
</div>
<hr />
<div ng-repeat="s in users | unique:'status'">
<input id="inputstatus" type="checkbox" ng-model="input.chkStatus" ng-click="includeItem(s, 'status')"/> {{s}}
</div>
<ul>
<li ng-repeat="u in users | filter:filterFn">
<p>{{u.username}}</p>
<p>{{u.status}}</p>
</li>
</ul>
Filter dump: {{filtered}}
</body>
</html>
相关文章:
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 按不同项目对对象数组进行排序
- 使用JavaScript或jQuery检查单选按钮选择是否与数组中的项目匹配
- JS:从整个数组中每次得到5个项目,并得到平均值
- 使用圆中的数组更改背景颜色项目
- 编辑CSV数组中的项目-快速CSV node.js
- 我可以限制我添加到数组中的项目数量吗
- 使用javascript/jquery从现有数组中创建一个新数组,该数组保存项目存在的次数
- 什么's JavaScript数组中项目的作用域
- 将项目放入数组中
- 使用 id 和 Javascript 从数组中删除项目
- (角度.js)如何通过过滤器计算数组中有多少项目
- 如何通过迭代对象数组来删除某些项目
- Lodash 从与值数组不匹配的数组中获取项目
- 发布要形成的 n 个项目的数组
- 查找数组中项目包含子字符串的索引
- 使用节点在 JSON 数组中搜索项目(最好不迭代)
- Javascript:从数组中删除包含带有侦听器的对象的项目的最佳方法
- 更新挖空中可观察数组中项目的属性
- JavaScript:如何在 for 循环期间跳过数组中的当前项目?(继续?