复选框过滤器在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>

我定义了三个过滤器(属性组、属性类型和属性状态)。因此，每当用户单击相应的复选框时，表格将显示相关的属性。一切看起来都很好，唯一的问题是，当我选择第一个复选框(例如属性组)时，表显示让我们说总共100的50个属性。如果我点击下一个，它会过滤我已经过滤过的50个属性，而不是过滤整个数组(100个属性)。我想在用户勾选多个复选框时过滤整个属性。我在控制器中的filterType循环上做了很多工作来完成它，但我不能。我真的很感谢你的帮助。我注意到这个例子与我的情况非常相似。如果我从"裤子尺寸"answers"衬衫尺寸"中分别检查一个过滤器，它将只显示匹配的项目，而不是所有项目。