Filtre de Tableau à l'Aide de Cases à cocher avec AngularJS

EDIT 2

Par toutes les requêtes de l'OP, ici, c'est l'état final.

http://jsfiddle.net/rzgWr/19/

---

MODIFIER (OP ajouté un bounty)

Par votre générosité, est-ce cela que vous vouliez?

http://jsfiddle.net/rzgWr/17/

---

Est-ce cela que vous vouliez?

http://jsfiddle.net/rzgWr/12/

Modèle

<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);
};
});

OriginalL'auteur