Filter Array Using Checkboxes with AngularJS

后端 未结 2 1703
隐瞒了意图╮
隐瞒了意图╮ 2020-12-02 17:59

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

相关标签:
2条回答
  • 2020-12-02 18:23

    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);}
    0 讨论(0)
  • 2020-12-02 18:34

    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);
            };
        });
    
    0 讨论(0)
提交回复
热议问题