复选框过滤器在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中无法正常工作

回答

相关问题