帶有復選框和過濾器的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。