我有以下代码，我试图通过选中玩家裤子的复选框来过滤阵列中的玩家。
我知道我在转发器中有数据数组，然后在数据数组元素之外的元素（两个不同的div）中的过滤输入，这可能是导致断开连接的原因吗？因为我注意到当我将复选框添加到转发器元素时，我会在单击复选框时获得某种形式的反馈数组。
绑定搜索输入框非常容易实现，但是我花了太多时间来获取这个简单的复选框来过滤数据。
所以我现在正在向Angular社区寻求一些关于过滤复选框的帮助，因为文档没有很好地介绍这个主题。
这是小提琴：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);
}
真诚地感谢所有帮助/建议。
感谢。
答案 0 :(得分：27)
编辑2
根据OP的所有请求，这是最终状态。
编辑（OP增加了赏金）
根据你的赏金，这是你想要的吗？
这是你想要的吗？
<强>模板
<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>
<强>脚本
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);
};
});
答案 1 :(得分：0)
完全优化的js代码
var myApp = angular.module('myApp',[]);
var selected;
var uniqueItems = function (data, key) {
var result = [];
for (var i = 0; i < data.length; i++) {
var value = data[i][key];
if (result.indexOf(value) == -1) {
result.push(value);
}
}
return result;
};
var fliter = function(totalData,selectedData,equalData){
var filterAfter = [];
selected = false;
for (var j in totalData) {
var p = totalData[j];
for (var i in selectedData) {
if (selectedData[i]) {
selected = true;
if (i == p[equalData]) {
filterAfter.push(p);
break;
}
}
}
}
if (!selected) {
filterAfter = totalData;
}
return filterAfter;
}
function MyCtrl($scope, filterFilter) {
$scope.usePants = {};
$scope.useShirts = {};
$scope.useShoes = {};
$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'}
];
// Watch the pants that are selected
$scope.$watch(function () {
return {
players: $scope.players,
usePants: $scope.usePants,
useShirts: $scope.useShirts,
useShoes: $scope.useShoes
}
}, function (value) {
$scope.count = function (prop, value) {
return function (el) {
return el[prop] == value;
};
};
$scope.pantsGroup = uniqueItems($scope.players, 'pants');
$scope.shirtsGroup = uniqueItems($scope.players, 'shirt');
$scope.shoesGroup = uniqueItems($scope.players, 'shoes');
var fliterType = [{selected : $scope.usePants,fliter : 'pants'},{selected : $scope.useShirts,fliter : 'shirt'},{selected : $scope.useShoes,fliter : 'shoes'}];
var startFliter = $scope.players;
for(var i in fliterType){
var startFliter = fliter(startFliter,fliterType[i].selected,fliterType[i].fliter);
}
$scope.filteredPlayers = startFliter;
}, true);}