復選框過濾器無法在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女巫已經過濾，因此您需要在每個復選框上單擊“首先綁定網格”，然后進行過濾。