Question

我有重复列表，我需要用复选框过滤该列表。在复选框中我有三个值，ERROR，WARNING，SUCCESS。如果我检查ERROR，只显示错误，如果我检查ERROR和WARNING显示错误和警告，同样成功。但问题是，当我检查ERROR框时，列表只显示有错误的数据，但是当我检查WARNING时，它们会显示列表中的所有数据，而不仅是ERROR和WARNING数据。为了更好地解释这里是

> http://jsfiddle.net/ADukg/12574/

Answer 1

这是因为您的toggleFilter()功能

 $scope.toggleFilter= function(filterValues) {
    if ($scope.filterValue == undefined) {
        $scope.filterValue = filterValues;
    } else {
        delete $scope.filterValue;
    }
};

做什么：

如果有否过滤器，请设置所选过滤器
当 a 过滤器时，请删除当前过滤器

因此，当您检查ERROR时，它会将ERROR设置为过滤器，但是当您单击“警告”时，它会触发else，并删除当前选择。

将else更改为：

else {
    delete $scope.filterValue;
    console.log($scope.filterValue);
}

当选择多个过滤器时，您可以看到它undefined。

Answer 2

因为没有任何解决方案，这是我的代码如何解决这个问题。

<div class="nav">
                <div ng-repeat="filter in filters" ng-class="{sel: selection.indexOf(filterValue) == selected}">
                    <span class="filters_ct_status"></span>
                    <div ng-repeat="filterValue in filter.lists" style="float:left; padding: 5px">
                            <input type="checkbox" value="{{filterValue}}" ng-model="checked" ng-checked="selection.indexOf(filterValue) > -1" ng-click="toggleSelection(filterValue)">
                            <img ng-if="filterValue == 'Success'" src="assets/img/success.png" alt="success"/>
                            <img ng-if="filterValue == 'Warning'" src="assets/img/warning.png" alt="warning"/>
                            <img ng-if="filterValue == 'Error'" src="assets/img/error.png" alt="Error"/>
                    </div>
                </div>
            </div>
            <div class="table_bench_info logBox" style="overflow-y: auto; height: 250px;">
                <div class="list" ng-repeat="list in lists">
                    <span ng-if="listaFiltera.indexOf(list.class) !== -1">{{list.description}}</span>
                </div>

            </div>

并且有控制器

        $scope.filterValue = [];
    // toggle selection for a given employee by name
    $scope.toggleSelection = function(valueFilter) {
    var idx = $scope.filterValue.indexOf(valueFilter);
    if (idx > -1) {
         $scope.filterValue.splice(idx, 1);
        if($scope.filterValue.length == 0){
            return $scope.listaFiltera = ['Error','Warning','Success'];
        }else{

        $scope.listaFiltera = $scope.filterValue.map(function(x) {
        return x;
    });

    }
    } else {
        $scope.filterValue.push(valueFilter);
        $scope.listaFiltera = $scope.filterValue.map(function(x) {
        return x;
        });
 }
};

 $scope.filters = [
        {   
            lists: ['Error','Warning','Success']
        }
    ];

我们需要对数组进行推送复选框。并从数组中拼接未选中的复选框。另外，如果我们想要多个过滤器，我们需要检查$ scope.filterValue.length。

AngularJS ng-repeat with checkbox和filter

2 个答案: