使用复选框与AngularJS过滤数组 [英] Filter Array Using Checkboxes with AngularJS
本文介绍了使用复选框与AngularJS过滤数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码，我想通过选中一个播放器的pantsize的复选框过滤阵列中的玩家。
我知道我有一个中继器的数据数组，然后在数据数组元素外的元素（两个不同的div）的过滤输入，这可能是什么导致断开连接？因为我注意到，当我添加复选框到中继器元素，我得到某种形式的反馈数组，当我单击复选框。
绑定搜索输入框很容易实现，但是我花了太多时间得到这个简单的复选框过滤数据。
所以现在我们到Angular社区有一点帮助过滤与复选框作为文档没有涵盖这个主题很好。
这里是小提琴： http://jsfiddle.net/rzgWr/1 /
< div ng-controller =MyCtrl>
< div>
< div ng-repeat =球员裤子| groupBy：'pants'>
< b>< input type =checkboxng-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 '，裤子：'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）;
}
任何和所有帮助/
解决方案
EDIT 2
根据OP的所有要求，这里是最终状态。
EDIT （OP添加赏金）
这是你想要的？
http：// jsfiddle。 net / rzgWr / 17 /
这是你想要的吗？
模板
< div ng-controller =MyCtrl>
< div>
< div>
搜索：< input name =companytype =textclass =search-inputng-model =query/>
< / div>
< div ng-init =pantsGroup =（players | groupBy：'pants'）>
< div ng-repeat =pantsGroup>
< b>< input type =checkboxng-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>
脚本
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'}，
{名字：'Wayne Gretzky'，衬衫：'XL'，裤子：'38'，鞋子：'10'}，
{name：'迈克尔·乔丹'，衬衫：'M'，裤子：'32' shoes：'9'}，
{name：'Rodman'，shirt：'XXL'，pants：'42'，shoes：'11'}，
{name：'Jake Smitz' ：'XXL'，pants：'42'，shoes：'12'}，
{name：'Will Will'，shirt：'XXL'，pants：'42' b $ b {name：'Youasdf Oukls'，shirt：'XL'，pants：'38'，shoes：'10'}，
{name：'Sam Sneed'，shirt：'XL' '38'，shoes：'10'}，
{name：'Bill Waxy'，shirt：'M'，pants：'32'，shoes：'9'}，
{name： Javier Xavior'，衬衫：'M'，裤子：'32'，shoes：'9'}，
{name：'Bill Knight'，衬衫：'M'，裤子：'32' 9'}，
{name：'One More'，shirt：'M'，pants：'32'，shoes：'9'}，
{name：'Player One' 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
// 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
if（result.indexOf（value）== -1）{
result.push（value）;
}
}
返回结果;
};
myApp.filter（'groupBy'，
function（）{
return function（collection，key）{
if（collection === null）
return 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.
EDIT (OP added a bounty)
Per your bounty, is this what you wanted?
Is this what you wanted?
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屋！
查看全文
