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
Full optimzed js Code
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);}
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);
};
});