複選框過濾器在AngularJS中無法正常工作

我需要使用複選框過濾一些屬性。這裏是我寫的：複選框過濾器在AngularJS中無法正常工作

JS代碼：

app.controller("filterCtrl", function ($scope, $http) { 

$http({ 
    method: 'GET', 
    url: contextPath + '/properties' 
}) 
    .then(function (response) { 
     var properties = response.data.properties; 
     var propertyFilters = response.data.filters; 
     $scope.properties = properties; 
     $scope.propertyFilters = propertyFilters; 

     $scope.usePropertyGroups = {}; 
     $scope.usePropertyTypes = {}; 
     $scope.usePropertyStates = {}; 

     $scope.$watch(function() { 
      return { 
       properties: $scope.properties, 
       usePropertyGroups: $scope.usePropertyGroups, 
       usePropertyTypes: $scope.usePropertyTypes, 
       usePropertyStates: $scope.usePropertyStates 
      } 
     }, function (value) { 

      var filterType = [ 
       {selected : $scope.usePropertyGroups, filterProp : 'propertyGroups'}, 
       {selected : $scope.usePropertyTypes, filterProp : 'propertyTypes'}, 
       {selected : $scope.usePropertyStates, filterProp : 'states'} 
      ]; 

      var filteredProps = $scope.propertyVOs; 

      for(var i in filterType){ 
      filteredProps = filterData(filteredProps, filterType[i].selected, filterType[i].filterProp); 
      } 

      $scope.filteredProps = filteredVOs; 

     }, true); 

    }); 
}) 

var filterData = function(allData,selectedProps,equalData){ 
var afterFilter = []; 
var selected = false; 
for (var j in allData) { 
    var p = allData[j]; 
    for (var i in selectedProps) { 
     if (selectedProps[i]) { 
      selected = true; 
      if (i == p[equalData]) { 
       afterFilter.push(p); 
       break; 
      } 
     } 
    } 
} 
if (!selected) { 
    afterFilter = allData; 
} 

return afterFilter; 
};

HTML：

<div data-ng-controller="filterCtrl"> 

<div> 
    <table> 
     <thead> 
     <tr> 
      <th>property ID</th> 
      <th>property name</th> 
      <th>property description</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr data-ng-repeat="vo in filteredProps"> 
      <td>{{vo.id}}</td> 
      <td>{{vo.name}}</td> 
      <td>{{vo.description}}</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

<div> 
    <div class="filter-list-container"> 
     <ul data-ng-repeat="(key,value) in propertyFilters.filterOfGroup"> 
      <li><input type="checkbox" data-ng-model="usePropertyGroups[key]"/>{{key}}<span> ({{value}})</span></li> 
     </ul> 
    </div> 
    <div class="filter-list-container"> 
     <ul data-ng-repeat="(key,value) in propertyFilters.filterOfType"> 
      <li><input type="checkbox" data-ng-model="usePropertyTypes[key]"/>{{key}}<span> ({{value}})</span></li> 
     </ul> 
    </div> 
    <div class="filter-list-container"> 
     <ul data-ng-repeat="(key,value) in propertyFilters.filterOfStates"> 
      <li><input type="checkbox" data-ng-model="usePropertyStates[key]"/>{{key}}<span> ({{value}})</span></li> 
     </ul> 
    </div> 
</div>

我定義了三個過濾器（屬性組，屬性類型和屬性狀態）。所以無論何時用戶點擊相應的複選框，表格都會顯示相關屬性。一切看起來不錯，唯一的問題是當我選擇第一個複選框（例如屬性組）時，表格顯示可以說50個屬性總數爲100。如果我點擊下一個，它將過濾已經過濾的50個屬性，而不是過濾整個數組（這是100個屬性）。我的意思是我想要在用戶選中多個複選框時過濾整個屬性。我在控制器的filterType循環上做了很多工作，以完成它，但是我做不到。我非常感謝這方面的幫助。我注意到這個example與我的情況非常相似。如果我從「褲子尺寸」中選擇一個過濾器，並從「襯衫尺寸」中選擇一個過濾器，它將只顯示匹配的項目而不是所有項目。

來源

2016-09-29 Nisman

你能提供蹲點嗎？嘲笑你的http呼叫 –

我認爲它的過濾器1次50/100項目2次20/50剩餘50個女巫已經過濾，所以你需要在每個複選框上點擊第一個綁定網格，然後過濾它。

來源

2016-09-29 17:21:10

複選框過濾器在AngularJS中無法正常工作

回答

相關問題