angularJs單柱過濾基於複選框選擇

我有一個JSON數據集在角度說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' })

但它適用於只有一個複選框。

來源

2017-04-04 Mayank Patel

你需要共享你的代碼'$ 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); 
    } 
});

來源

2017-04-04 07:39:28

我會用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>

來源

2017-04-04 08:15:07 tanmay

angularJs單柱過濾基於複選框選擇

回答

相關問題