Question

我试图通过使用不同类别的多个复选框来过滤json数据，到目前为止我已成功过滤数据但我需要的是过滤类别也请通过以下小提琴来理解这一点 jsfiddle link 基本上当我选择裤子类别中的东西时，衬衫大小和鞋码过滤器也会根据组合进行过滤，这里的问题是复选框的过滤是从上到下的方向发生的，例如，如果我选择衬衫尺寸类别的东西然后只有鞋子尺寸复选框被过滤但不是裤子尺寸我使用以下服务

 $scope.$watch(function () {
        return {
            players: $scope.players,
            usePants: $scope.usePants,
            useShirts: $scope.useShirts,
            useShoes: $scope.useShoes
        }
    }, function (value) {
        var selected;

        $scope.pantsGroup = uniqueItems($scope.players, 'pants');
        var filterAfterPants = [];        
        selected = false;
        for (var j in $scope.players) {
            var p = $scope.players[j];
            for (var i in $scope.usePants) {
                if ($scope.usePants[i]) {
                    selected = true;
                    if (i == p.pants) {
                        filterAfterPants.push(p);
                        break;
                    }
                }
            }        
        }
        if (!selected) {
            filterAfterPants = $scope.players;
        }

        $scope.shirtsGroup = uniqueItems(filterAfterPants, 'shirt');
        var filterAfterShirts = [];        
        selected = false;
        for (var j in filterAfterPants) {
            var p = filterAfterPants[j];
            for (var i in $scope.useShirts) {
                if ($scope.useShirts[i]) {
                    selected = true;
                    if (i == p.shirt) {
                        filterAfterShirts.push(p);
                        break;
                    }
                }
            }       
        }
        if (!selected) {
            filterAfterShirts = filterAfterPants;
        }

        $scope.shoesGroup = uniqueItems(filterAfterShirts, 'shoes');
        var filterAfterShoes = [];        
        selected = false;
        for (var j in filterAfterShirts) {
            var p = filterAfterShirts[j];
            for (var i in $scope.useShoes) {
                if ($scope.useShoes[i]) {
                    selected = true;
                    if (i == p.shoes) {
                        filterAfterShoes.push(p);
                        break;
                    }
                }
            }    
        }
        if (!selected) {
            filterAfterShoes = filterAfterShirts;
        }        

        $scope.filteredPlayers = filterAfterShoes;        
    }, true);

Answer 1

我对您的服务和用户界面进行了一些更改

根据运行时过滤数据在UI上自行过滤复选框使用ng-hide检查<div ng-hide="(filteredPlayers | filter:pants).length==0">行添加

<div ng-controller="MyCtrl">
    <div>
      <div class="top">
          Search: <input name="company" type="text" class="search-input" ng-model="query"/>
      </div>

<section class="left" style="border-right:1px">  
    <div class="filter">
    Pant Size
    <div>
        <div ng-repeat="pants in pantsGroup">
        <div ng-hide="(filteredPlayers | filter:pants).length==0">
            <b><input type="checkbox" ng-model="usePants[pants]"/>{{pants}}</b>
            <span>({{(filteredPlayers | filter:pants).length}})</span>
        </div>
        </div>
    </div>
    </div>

    <div class="filter">
    Shirt Size
    <div>
        <div ng-repeat="shirts in shirtsGroup">
           <div ng-hide="(filteredPlayers | filter:shirts).length==0">
            <b><input type="checkbox" ng-model="useShirts[shirts]"/>{{shirts}}</b>
            <span>({{(filteredPlayers | filter:shirts).length}})</span>
           </div>
        </div>
    </div>
    </div>

    <div class="filter">
    Shoe Size
    <div>
        <div ng-repeat="shoes in shoesGroup">
        <div ng-hide="(filteredPlayers | filter:shoes).length==0">
            <b><input type="checkbox" ng-model="useShoes[shoes]"/>{{shoes}}</b>
            <span>({{(filteredPlayers | filter:shoes).length}})</span>
         </div>
        </div>
    </div>
    </div>
</section>        
<section class="right" style="border-right:1px">
    <div>
        <ul>
        <li ng-repeat="player in filteredPlayers | filter:query" >
            <p><b>Player: {{player.name}}</b></p>
            <p>Shirt Size: {{player.shirt}} Pant Size: {{player.pants}} Shoe Size: {{player.shoes}}</p>
        </li>
        </ul>    
    </div>

</section>
</div>

在服务中使用相同的数据集来获取不同的组

var myApp = angular.module('myApp',[]);

var uniqueItems = function (data, key) {
    //alert("test");
    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;
};

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: 'XSXL', pants: '42', shoes: '11'},
        {name: 'Jake Smitz', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Will Will', shirt: 'XXLL', 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: 'XXXXL', 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) {
        var selected;

        $scope.pantsGroup = uniqueItems($scope.players, 'pants');
        var filterAfterPants = [];        
        selected = false;
        for (var j in $scope.players) {
            var p = $scope.players[j];
            for (var i in $scope.usePants) {
                if ($scope.usePants[i]) {
                    selected = true;
                    if (i == p.pants) {
                        filterAfterPants.push(p);
                        break;
                    }
                }
            }        
        }
        if (!selected) {
            filterAfterPants = $scope.players;
        }

        $scope.shirtsGroup = uniqueItems($scope.players, 'shirt');
        var filterAfterShirts = [];        
        selected = false;
        for (var j in filterAfterPants) {
            var p = filterAfterPants[j];
            for (var i in $scope.useShirts) {
                if ($scope.useShirts[i]) {
                    selected = true;
                    if (i == p.shirt) {
                        filterAfterShirts.push(p);
                        break;
                    }
                }
            }       
        }
        if (!selected) {
            filterAfterShirts = filterAfterPants;
        }

        $scope.shoesGroup = uniqueItems($scope.players, 'shoes');
        var filterAfterShoes = [];        
        selected = false;
        for (var j in filterAfterShirts) {
            var p = filterAfterShirts[j];
            for (var i in $scope.useShoes) {
                if ($scope.useShoes[i]) {
                    selected = true;
                    if (i == p.shoes) {
                        filterAfterShoes.push(p);
                        break;
                    }
                }
            }    
        }
        if (!selected) {
            filterAfterShoes = filterAfterShirts;
        }        

        $scope.filteredPlayers = filterAfterShoes;        
    }, true);


    $scope.$watch('filtered', function (newValue) {
        if (angular.isArray(newValue)) {
            console.log(newValue.length);
        }
    }, true);    
}

检查更新后的fiddle

希望它会对你有所帮助。

使用多个复选框在angularJs中动态过滤

1 个答案: