Question

我有一个角度说明的

的json数据集

$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

现在我想根据上面的3个复选框选择过滤$scope.data。要在$scope.data中过滤的列为filterByCheckbox

以上是我的数据集，其中包含列filterByCheckbox的记录列表我希望根据该列过滤数据。

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

我如何在angularjs中实现这一目标？

我试过了：

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

但它仅适用于一个复选框。

Answer 1

$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);
    }  
});

Answer 2

我会使用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>

查找下面的工作示例！

＆＃13;

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'
  }];
});

＆＃13;

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

＆＃13;

angularJs根据复选框选择过滤单列，具有不同的值

2 个答案: