Question

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

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>

我定义了三个过滤器（属性组，属性类型和属性状态）。因此，每当用户单击相应的复选框时，表格将显示相关属性。一切看起来都不错，唯一的问题是当我选择第一个复选框（例如属性组）时，表格显示50总共100个属性。如果我单击下一个，它将过滤我已经过滤的50属性，而不是过滤整个数组（这是100个属性）。我的意思是我想在用户检查多个复选框时过滤整个属性。我在控制器中的filterType循环上做了很多工作来完成它，但我不能。我真的很感激任何帮助。我注意到这个example与我的情况非常相似。如果我从＆＃34;裤子大小＆＃34;检查一个过滤器和＃34;衬衫尺码＆＃34;它只显示匹配的项目而不是所有项目。

Answer 1

我认为它的过滤器1次50/100项目2次20/50剩余50个女巫已经过滤所以你需要在每个复选框上点击第一个绑定网格然后过滤它。

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

1 个答案: