AngularJS ng-repeat複選框和篩選器

我有ng-repeat列表，我需要用複選框過濾該列表。在複選框中，我有三個值，ERROR，WARNING，SUCCESS。如果我檢查錯誤，只顯示錯誤，如果我檢查錯誤和警告顯示錯誤和警告，與成功相同。但問題是，當我檢查錯誤框，列表只顯示有錯誤的數據，但是當我檢查警告時，它們顯示列表中的所有數據，不僅僅是ERROR和WARNING數據。爲了更好地解釋這裏是AngularJS ng-repeat複選框和篩選器

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

來源

2017-07-06 Arter

因爲沒有任何解決方案，這是我的代碼，我如何解決這個問題。

<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。

來源

2017-07-25 12:35:18 Arter

這是因爲你的toggleFilter()功能

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

是什麼呢：

當有沒有過濾器，請將選定的過濾器
當有a過濾器時，刪除當前的過濾器

所以，當你檢查錯誤，它設置誤差過濾器，但是當你再單擊警告過，它觸發else，並刪除當前的選擇。

當您更改else到：

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

你可以看到選擇超過1個過濾器時，它會記錄undefined。

來源

2017-07-06 13:57:17

好的thnx，但我需要做什麼？ – Arter

AngularJS ng-repeat複選框和篩選器

回答

相關問題