- 首页
- 其他开发
- 在 AngularJS 中使用复选框过滤数组
在 AngularJS 中使用复选框过滤数组
[英] Filter Array Using Checkboxes with AngularJS
本文介绍了在 AngularJS 中使用复选框过滤数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码，我试图通过选中球员裤子尺寸的复选框来过滤数组中的球员.
我知道我在中继器中有数据数组，然后在数据数组元素(两个不同的 div)之外的元素中进行过滤输入，这可能是导致断开连接的原因吗?因为我注意到当我将复选框添加到转发器元素时，当我单击复选框时，我确实得到了某种形式的反馈数组.
绑定搜索输入框很容易实现，但是我花了太多时间来获取这个简单的复选框来过滤数据.
所以我现在向 Angular 社区寻求一些关于使用复选框过滤的帮助，因为文档没有很好地涵盖这个主题.
这是小提琴:http://jsfiddle.net/rzgWr/1/
<div><div ng-repeat="玩家的裤子 | groupBy:'pants'"><b><input type="checkbox" ng-model="query"/>{{pants}}</b><span>({{(players | filter:pants).length}})</span>
<div><ul><li ng-repeat="玩家中的玩家 | filter:query"><p><b>{{player.name}}</b></p><p>{{player.shirt}} {{player.pants}}, {{player.shoes}}</p>
function MyCtrl($scope, filterFilter) {$scope.players = [{名称:'Bruce Wayne'，衬衫:'XXL'，裤子:'42'，鞋子:'12'}，{名称:'Wayne Gretzky'，衬衫:'XL'，裤子:'38'，鞋子:'10'}，{名称:'迈克尔乔丹'，衬衫:'M'，裤子:'32'，鞋子:'9'}，{名称:'球员二'，衬衫:'XXL'，裤子:'42'，鞋子:'12'}];$scope.$watch('filtered', function (newValue) {如果 (angular.isArray(newValue)) {控制台日志(新值.长度)；}}， 真的);
}
衷心感谢所有帮助/建议.
谢谢.
解决方案
EDIT 2
根据 OP 的所有请求，这里是最终状态.
http://jsfiddle.net/rzgWr/19/
<小时>
EDIT(OP 添加了赏金)
根据您的赏金，这是您想要的吗?
http://jsfiddle.net/rzgWr/17/
<小时>
这是你想要的吗?
http://jsfiddle.net/rzgWr/12/
模板
<div><div>搜索:<input name="company" type="text" class="search-input" ng-model="query"/>
<div ng-init="pantsGroup = (players | groupBy:'pants')"><div ng-repeat="裤子组中的裤子" ><b><input type="checkbox" ng-model="usePants[$index]"/>{{pants}}</b><span>({{(players | filter:pants).length}})</span>
<div><ul><li ng-repeat="玩家中的玩家 | filter:query | filter:filterPants()"><p><b>{{player.name}}</b></p><p>{{player.shirt}} {{player.pants}}, {{player.shoes}}</p>
脚本
var myApp = angular.module('myApp',[]);函数 MyCtrl($scope, filterFilter) {$scope.usePants = [];$scope.filterPants = 函数 () {返回函数 (p) {for (var i in $scope.usePants) {return (p.pants == $scope.pantsGroup[i] && $scope.usePants[i]);}};};$scope.players = [{名称:'Bruce Wayne'，衬衫:'XXL'，裤子:'42'，鞋子:'12'}，{名称:'Wayne Gretzky'，衬衫:'XL'，裤子:'38'，鞋子:'10'}，{名称:'迈克尔乔丹'，衬衫:'M'，裤子:'32'，鞋子:'9'}，{名称:'罗德曼'，衬衫:'XXL'，裤子:'42'，鞋子:'11'}，{名称:'Jake Smitz'，衬衫:'XXL'，裤子:'42'，鞋子:'12'}，{名称:'Will Will'，衬衫:'XXL'，裤子:'42'，鞋子:'12'}，{名称:'Youasdf Oukls'，衬衫:'XL'，裤子:'38'，鞋子:'10'}，{名称:'Sam Sneed'，衬衫:'XL'，裤子:'38'，鞋子:'10'}，{名称:'Bill Waxy'，衬衫:'M'，裤子:'32'，鞋子:'9'}，{名称:'Javier Xavior'，衬衫:'M'，裤子:'32'，鞋子:'9'}，{名称:'Bill Knight'，衬衫:'M'，裤子:'32'，鞋子:'9'}，{名称:'One More'，衬衫:'M'，裤子:'32'，鞋子:'9'}，{名称:'球员一号'，衬衫:'XXL'，裤子:'42'，鞋子:'11'}，{名称:'Space Cadet'，衬衫:'XXL'，裤子:'42'，鞋子:'12'}，{名称:'球员二'，衬衫:'XXL'，裤子:'42'，鞋子:'12'}];$scope.$watch('filtered', function (newValue) {如果 (angular.isArray(newValue)) {控制台日志(新值.长度)；}}， 真的);}myApp.filter('count', function() {返回函数(集合，键){var out = "测试";for (var i = 0; i < collection.length; i++) {//console.log(collection[i].pants);//var out = myApp.filter('filter')(collection[i].pants, "42", true);}返回;}});var uniqueItems = 函数(数据，键){var 结果 = new Array();for (var i = 0; i < data.length; i++) {var value = data[i][key];如果 (result.indexOf(value) == -1) {结果.推(值)；}}返回结果；};myApp.filter('groupBy',功能 () {返回函数(集合，键){如果(集合 === null)返回；返回 uniqueItems(collection, key);};});
I have the following code where i'm trying to filter on the players in the array by checking a checkbox for the pantsize of a player.
I know i have the data array in a repeater, and then the filtering inputs in an element outside of the data array element (two different divs), could this be what's causing the disconnect? Because i notice when i add the checkbox to the repeater element i do get some form of feedback array when i click the checkbox.
Binding a search input box was so easy to implement, however i'm spending way too much time getting this simple checkbox to filter the data.
So im now reaching out to the Angular community for a little help on filtering with checkboxes as the documentation does not cover this topic very well.
Here is the fiddle: http://jsfiddle.net/rzgWr/1/
<div ng-controller="MyCtrl">
<div>
<div ng-repeat="pants in players | groupBy:'pants'">
<b><input type="checkbox" ng-model="query"/>{{pants}}</b>
<span>({{(players | filter:pants).length}})</span>
</div>
<div>
<ul>
<li ng-repeat="player in players | filter:query">
<p><b>{{player.name}}</b></p>
<p>{{player.shirt}} {{player.pants}}, {{player.shoes}}</p>
</li>
</ul>
</div>
</div>
function MyCtrl($scope, filterFilter) {
$scope.players = [
{name: 'Bruce Wayne', shirt: 'XXL', pants: '42', shoes: '12'},
{name: 'Wayne Gretzky', shirt: 'XL', pants: '38', shoes: '10'},
{name: 'Michael Jordan', shirt: 'M', pants: '32', shoes: '9'},
{name: 'Player Two', shirt: 'XXL', pants: '42', shoes: '12'}
];
$scope.$watch('filtered', function (newValue) {
if (angular.isArray(newValue)) {
console.log(newValue.length);
}
}, true);
}
Any and all help/advice is sincerely appreciated.
Thanks.
解决方案
EDIT 2
Per all the requests of the OP, here is the final state.
http://jsfiddle.net/rzgWr/19/
EDIT (OP added a bounty)
Per your bounty, is this what you wanted?
http://jsfiddle.net/rzgWr/17/
Is this what you wanted?
http://jsfiddle.net/rzgWr/12/
Template
<div ng-controller="MyCtrl">
<div>
<div>
Search: <input name="company" type="text" class="search-input" ng-model="query"/>
</div>
<div ng-init="pantsGroup = (players | groupBy:'pants')">
<div ng-repeat="pants in pantsGroup" >
<b><input type="checkbox" ng-model="usePants[$index]"/>{{pants}}</b>
<span>({{(players | filter:pants).length}})</span>
</div>
</div>
<div>
<ul>
<li ng-repeat="player in players | filter:query | filter:filterPants()">
<p><b>{{player.name}}</b></p>
<p>{{player.shirt}} {{player.pants}}, {{player.shoes}}</p>
</li>
</ul>
</div>
</div>
</div>
Script
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, filterFilter) {
$scope.usePants = [];
$scope.filterPants = function () {
return function (p) {
for (var i in $scope.usePants) {
return (p.pants == $scope.pantsGroup[i] && $scope.usePants[i]);
}
};
};
$scope.players = [
{name: 'Bruce Wayne', shirt: 'XXL', pants: '42', shoes: '12'},
{name: 'Wayne Gretzky', shirt: 'XL', pants: '38', shoes: '10'},
{name: 'Michael Jordan', shirt: 'M', pants: '32', shoes: '9'},
{name: 'Rodman', shirt: 'XXL', pants: '42', shoes: '11'},
{name: 'Jake Smitz', shirt: 'XXL', pants: '42', shoes: '12'},
{name: 'Will Will', shirt: 'XXL', pants: '42', shoes: '12'},
{name: 'Youasdf Oukls', shirt: 'XL', pants: '38', shoes: '10'},
{name: 'Sam Sneed', shirt: 'XL', pants: '38', shoes: '10'},
{name: 'Bill Waxy', shirt: 'M', pants: '32', shoes: '9'},
{name: 'Javier Xavior', shirt: 'M', pants: '32', shoes: '9'},
{name: 'Bill Knight', shirt: 'M', pants: '32', shoes: '9'},
{name: 'One More', shirt: 'M', pants: '32', shoes: '9'},
{name: 'Player One', shirt: 'XXL', pants: '42', shoes: '11'},
{name: 'Space Cadet', shirt: 'XXL', pants: '42', shoes: '12'},
{name: 'Player Two', shirt: 'XXL', pants: '42', shoes: '12'}
];
$scope.$watch('filtered', function (newValue) {
if (angular.isArray(newValue)) {
console.log(newValue.length);
}
}, true);
}
myApp.filter('count', function() {
return function(collection, key) {
var out = "test";
for (var i = 0; i < collection.length; i++) {
//console.log(collection[i].pants);
//var out = myApp.filter('filter')(collection[i].pants, "42", true);
}
return out;
}
});
var uniqueItems = function (data, key) {
var result = new Array();
for (var i = 0; i < data.length; i++) {
var value = data[i][key];
if (result.indexOf(value) == -1) {
result.push(value);
}
}
return result;
};
myApp.filter('groupBy',
function () {
return function (collection, key) {
if (collection === null) return;
return uniqueItems(collection, key);
};
});
这篇关于在 AngularJS 中使用复选框过滤数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
