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

Question

I have a requirement to filter some properties using check boxes. Here what I wrote:

js code:

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>

I defined three filters (property group, property type, and property state). so whenever user click the corresponding check box, table will show related properties. Everything looks good, the only issue is when I select the first check box (for example property group) table shows lets say 50 property of 100 total. If I click the next one it is filtering the 50 property which I already filtered instead of filtering the whole array (which is 100 properties). I mean I want to filter the whole properties whenever the user checks multiple check boxes. I have worked a lot on filterType loops in the controller to get it done but I couldn't. I really appreciate any help on this. I noticed that this example is very similar to my case. if I check one filter from "Pant Size" and one filter from "Shirt Size" it would show just the matched items instead of all items.

Answer 1

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