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复选框和筛选器

回答

相关问题