web-dev-qa-db-fra.com

Matrice de filtres utilisant des cases à cocher avec AngularJS

J'ai le code suivant où j'essaye de filtrer sur les joueurs du tableau en cochant une case pour la taille du pantalon d'un joueur.

Je sais que j'ai le tableau de données dans un répéteur, puis les entrées de filtrage dans un élément en dehors de l'élément de tableau de données (deux divs différents), cela pourrait-il être la cause de la déconnexion? Parce que je remarque que lorsque j'ajoute la case à cocher à l'élément répéteur, je reçois une forme de tableau de commentaires lorsque je clique sur la case à cocher.

La liaison d'un champ de saisie de recherche était si facile à mettre en œuvre, mais je passe beaucoup trop de temps à obtenir cette simple case à cocher pour filtrer les données.

Donc, je vais maintenant tendre la main à la communauté Angular pour obtenir un peu d'aide sur le filtrage avec les cases à cocher, car la documentation ne couvre pas très bien ce sujet.

Voici le violon: 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);

}

Toute aide/conseil est sincèrement apprécié.

Merci.

jsonangularjscheckboxfilter
12
Antonio Herrera

EDIT 2

Pour toutes les demandes de l'OP, voici l'état final.

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

EDIT(OP ajouté une prime)

Par votre prime, est-ce ce que vous vouliez?

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

C'est ce que tu voulais?

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);
        };
    });
26
Words Like Jared

Code optimisé complet

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