Question

我正在尝试在多个复选框上过滤我的结果。

这是我的JSFIDDLE

如何为ng-model编写动态checkboxes以使过滤器反映出来？

function MainCtrl($scope) {
     $scope.languages = [
        { name: 'persian', _id : 0 },
        { name: 'English', _id : 1 },
        { name: 'spanish', _id : 2 } 
      ];
   	$scope.bu = [
        { name: 'A', _id : 1 },
        { name: 'B', _id : 2 },
        { name: 'C', _id : 3 },
        { name: 'D', _id : 4 },
        { name: 'E', _id : 5 }
      ];
    
    $scope.array = [
  {   
    "id": 910,   
    "language": {
      "_id": "333",
      "name": "Persian",
      "abbreviation": "PE"
    },
    "business_unit": {
      "_id": "2",
      "name": "B"
    }
  },
  {    
    "id": 909,   
    "language": {
      "_id": "456",
      "name": "English",
      "abbreviation": "EN"
    },
    "business_unit": {
      "_id": "3",
      "name": "C"
    }
  },
  {    
    "id": 908,   
    "language": {
      "_id": "456",
      "name": "Spanish",
      "abbreviation": "SP"
    },
    "business_unit": {
      "_id": "4",
      "name": "D"
    }
  },
  {    
    "id": 911,   
    "language": {
      "_id": "343",
      "name": "German",
      "abbreviation": "GE"
    },
    "business_unit": {
      "_id": "5",
      "name": "E"
    }
  },
  {    
    "id": 912,   
    "language": {
      "_id": "696",
      "name": "Russian",
      "abbreviation": "RU"
    },
    "business_unit": {
      "_id": "1",
      "name": "A"
    }
  }]
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div ng-controller="MainCtrl">
    
    
    
    
   <li ng-repeat="o in languages" ng-model="lang.language.name">
      <input type="checkbox">
      {{o.name}},
  `</li>
  
   <br><br><br>
   <li ng-repeat="o in bu">
      <input type="checkbox" ng-model="bu.business_unit.name">
      {{o.name}},
  `</li>
  
  <br><br><br>
  <div ng-repeat="arr in array filter : lang | filter : bu">
      {{arr.language.name}} "and" {{arr.business_unit.name}}
  </div>
  
<div>

Answer 1

您可以使用自定义过滤器来实现目标：

自定义文件管理器：

filter('myFilter', function() {
  return function(items, search) {
    var filterItems = {
      search: search,
      result: []
    };

    if (!search.needFilter) {
      return items;
    }

    angular.forEach(items, function(value, key) {
      if (this.search.language[value.language.name] === true || this.search.business_unit[value.business_unit.name] === true) {
        this.result.push(value);
      }
    }, filterItems);
    return filterItems.result;
  };
})

HTML：

<p>Search by Language:</p>
  <li ng-repeat="o in languages">
    <input type="checkbox" ng-model="search.language[o.name]"> {{o.name}}
  </li>

  <p>Search by Unit:</p>
  <li ng-repeat="o in bu">
    <input type="checkbox" ng-model="search.business_unit[o.name]"> {{o.name}}
  </li>

  <p><b>Result:</b></p>
  <div ng-repeat="arr in array  | myFilter : search:false ">
    {{arr.language.name}} "and" {{arr.business_unit.name}}
  </div>

有关详细信息，请参阅PLUNKER DEMO

过滤多个复选框角度

1 个答案: