動態過濾使用多個複選框

Question

我想通過在不同類別使用多個複選框來過濾JSON數據，到目前爲止IAM成功地過濾數據，但我需要的是過濾的類別也請通過下面去小提琴理解這種 jsfiddle link 基本上當我選擇在pantsize類的東西，那麼襯衫尺寸和鞋的尺寸過濾器也過濾根據組合，這裏的問題是過濾複選框在頂部到底部的方向正在發生，例如，如果我選擇襯衫尺寸類別則只有鞋子大小複選框被過濾的東西，但不能使用以下服務

喘氣大小 蔭

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

希望它能幫助你。