angularJs单柱过滤基于复选框选择

问题描述：

$scope.data = [{ 
     call_id: '1', 
     title: 'test', 
     start: new Date(elem.call_date), 
     backgroundColor: "#9f1eab", 
     borderColor: "#9f1eab", 
     filterByCheckbox: 'filterOne'}, 
    { 
     call_id: '1', 
     title: 'test', 
     start: new Date(elem.call_date), 
     backgroundColor: "#9f1eab", 
     borderColor: "#9f1eab", 
     filterByCheckbox: 'filterTwo' 
    }];

不同值现在我有3 checkox

filterOne 
filterTwo 
filterThree

现在我想基于过滤$scope.data超过3个复选框选择。列$scope.data过滤是filterByCheckbox

所以上面是包含具有列filterByCheckbox我想筛选基于该列中的数据记录列表我的数据集。

如果选中前2个复选框，则应在filterByCheckbox列上过滤$scope.data，其中包含filterOne和filterTwo值。

我如何在angularjs中实现这一点？

我曾尝试：

$filter('filter')($scope.data, { filterByCheckbox: 'filterTwo' })

但它适用于只有一个复选框。

你需要共享你的代码'$ scope.data'和你到目前为止 – tanmay

我已经更新了我的问题做了什么。 –

[如何在angularJS中过滤多个值（OR操作）]可能的重复（http://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs） – Martin

答

$scope.filterdData=[]; 
angular.forEach($scope.data,function (val,key){ 
    if(($scope.filterOne && val.filterByCheckbox==='filterOne')||($scope.filterTwo && val.filterByCheckbox==='filterTwo')||($scope.filterThree && val.filterByCheckbox==='filterThree')){ 
    $scope.filterdData.push(val); 
    } 
});

答

我会用ngTrueValue and ngFalseValue解决它。它们基本上是分别选中和取消选中时应设置表达式的值。

所以，你的复选框应该是这样的：

<input type="checkbox" data-ng-model='search.filterOne' 
     data-ng-true-value="'filterOne'" data-ng-false-value='' />filterOne

现在，我们需要做的是使用那些作为过滤器。像这样：

<div ng-repeat="item in data | filter: search.filterOne | filter: search.filterTwo"> 
    <pre>{{item.filterByCheckbox}}</pre> 
    ... 
</div>

查找下面的工作示例！

var app = angular.module("myApp", []); 
 

 
app.controller("appCtrl", function($scope) { 
 

 
    $scope.search = [] 
 

 
    $scope.data = [{ 
 
    call_id: '1', 
 
    title: 'test', 
 
    start: new Date(), 
 
    backgroundColor: "#9f1eab", 
 
    borderColor: "#9f1eab", 
 
    filterByCheckbox: 'filterOne' 
 
    }, { 
 
    call_id: '1', 
 
    title: 'test', 
 
    start: new Date(), 
 
    backgroundColor: "#9f1eab", 
 
    borderColor: "#9f1eab", 
 
    filterByCheckbox: 'filterTwo' 
 
    }]; 
 
});

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body ng-controller="appCtrl"> 
 
    <input type="checkbox" data-ng-model='search.filterOne' data-ng-true-value="'filterOne'" data-ng-false-value='' />filterOne 
 
    <br> 
 
    <input type="checkbox" ng-model="search.filterTwo" data-ng-true-value="'filterTwo'" data-ng-false-value=''/>filterTwo 
 
    <div ng-repeat="item in data | filter: search.filterOne | filter: search.filterTwo"> 
 
    <pre>{{item.filterByCheckbox}}</pre> 
 
    </div> 
 
</body> 
 

 
</html>

angularJs单柱过滤基于复选框选择

相关推荐