复选框过滤器无法在AngularJS中正常工作

Question

我需要使用复选框过滤某些属性。 这是我写的：

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循环上做了很多工作，但无法完成。 我对此表示感谢。 我注意到该示例与我的案例非常相似。 如果我从“裤子大小”中检查一个过滤器，从“衬衫大小”中检查一个过滤器，它将仅显示匹配的项目，而不是所有项目。

Answer 1

我认为其过滤器1时间50/100项目2时间20/50剩余的50女巫已经过滤，因此您需要在每个复选框上单击“首先绑定网格”，然后进行过滤。