带有复选框和过滤器的AngularJS ng-repeat

Question

我有ng-repeat列表，我需要使用复选框过滤该列表。 在复选框中，我有三个值：错误，警告，成功。 如果我检查错误，则仅显示错误，如果我检查错误，并且警告显示错误和警告，则与成功相同。 但是问题是，当我选中“错误”框时，列表仅显示有错误的数据，但是当我选中“警告”时，它们显示列表中的所有数据，不仅是错误和警告数据。 为了更好的解释，这里是

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

Answer 1

这是因为您的toggleFilter()函数

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

有什么作用：

• 没有过滤器时，设置所选过滤器
• 当有一个过滤器，删除当前过滤器

因此，当您选中ERROR时，它将ERROR设置为过滤器，但是当您再次单击WARNING时，它将触发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。