Array di filtri usando le caselle di controllo con AngularJS

Ho il seguente codice in cui sto cercando di filtrare i giocatori dell’array selezionando una casella per il pantalone di un giocatore.

So che ho l’array di dati in un ripetitore, e quindi gli input di filtraggio in un elemento al di fuori dell’elemento dell’array di dati (due div diverse), potrebbe essere ciò che sta causando la disconnessione? Perché noto che quando aggiungo la casella di controllo all’elemento ripetitore ottengo qualche forma di array di feedback quando faccio clic sulla casella di controllo.

Legare una casella di input di ricerca è stato così facile da implementare, tuttavia sto spendendo troppo tempo per ottenere questa semplice casella di controllo per filtrare i dati.

Quindi ora mi rivolgo alla comunità Angular per un piccolo aiuto nel filtrare le caselle di controllo in quanto la documentazione non copre molto bene questo argomento.

Ecco il violino: http://jsfiddle.net/rzgWr/1/

{{pants}} ({{(players | filter:pants).length}})
  • {{player.name}}

    {{player.shirt}} {{player.pants}}, {{player.shoes}}

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

}

Qualsiasi e ogni aiuto / consiglio è sinceramente apprezzato.

Grazie.

MODIFICA 2

Per tutte le richieste dell’OP, ecco lo stato finale.

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


EDIT (OP ha aggiunto una taglia)

Per tua grazia, è questo che volevi?

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


Questo è quello che volevi?

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

Modello

 
Search:
{{pants}} ({{(players | filter:pants).length}})
  • {{player.name}}

    {{player.shirt}} {{player.pants}}, {{player.shoes}}

copione

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

Codice js ottimizzato completo


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