通过下拉使用角度过滤json数据答案

【问题标题】：filter json data using angular by drop down通过下拉使用角度过滤json数据
【发布时间】：2015-08-30 15:54:57
【问题描述】：

我正在尝试过滤掉 json 数据。这就是我所做的。

angular.module('staticSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
      multipleSelect: ["classA"]
    };
    $scope.isoffice = function(apps) {

      return apps.type === $scope.data.multipleSelect[0];
    };
    console.log($scope.data.multipleSelect[0]);
            $scope.apps = [{
      "id": "1",
      "type": "classA",
      "name": "Name 1"
    }, {
      "id": "2",
      "type": "classB",
      "name": "Name 2"
    }, {
      "id": "3",
      "type": "classC",
      "name": "Name 3"
    }, {
      "id": "4",
      "type": "classD",
      "name": "Name 4"
    }, {
      "id": "5",
      "type": "classE",
      "name": "Name 5"
    }
    ];
  }]);

Plunker

当用户从列表中只选择一个值并且“类型”不是数组时，这个做得很好。但是，我想知道如何过滤如下所示的数据，用户可以从中选择多个值将考虑 OR 条件过滤列表和数据。

$scope.apps = [{
      "id": "1",
      "type": ["classA","classB","classC"],
      "name": "Name 1"
    }, {
      "id": "2",
      "type": ["classB","classC","classE"],
      "name": "Name 2"
    }, {
      "id": "3",
      "type": ["classC"],
      "name": "Name 3"
    }, {
      "id": "4",
      "type": ["classD","classC"],
      "name": "Name 4"
    }, {
      "id": "5",
      "type": ["classA","classB","classC","classD","classE"],
      "name": "Name 5"
    }
    ];

Plunker

前。如果用户选择 A 类和 B 类，则输出将是名称 1、名称 2、名称 5

【问题讨论】：

你可以在这里找到答案：stackoverflow.com/questions/16958636/filter-data-using-dropdown 和一个演示：plnkr.co/edit/n7TebC?p=preview
详细博客：goo.gl/XYmwkr

标签： javascript json angularjs

【解决方案1】：

您需要为此制作自己的过滤器。
这是Demo。通过tutorial了解如何制作自定义过滤器。

    angular.module('staticSelect', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.data = {
          multipleSelect: ["classA"]
        };
        $scope.isoffice = function(apps) {

          return apps.type === $scope.data.multipleSelect[0];
        };
        console.log($scope.data.multipleSelect[0]);
       $scope.apps = [{
      "id": "1",
      "type": ["classA","classB","classC"],
      "name": "Name 1"
    }, {
      "id": "2",
      "type": ["classB","classC","classE"],
      "name": "Name 2"
    }, {
      "id": "3",
      "type": ["classC"],
      "name": "Name 3"
    }, {
      "id": "4",
      "type": ["classD","classC"],
      "name": "Name 4"
    }, {
      "id": "5",
      "type": ["classA","classB","classC","classD","classE"],
      "name": "Name 5"
    }
    ];
      }]).filter('multiplefilter', function() {
          return function(arr , filterFrom) {
            var filteredArray = [];
            
          angular.forEach(filterFrom, function (value, key) {
           angular.forEach(arr, function (arrObj, key) {
             if(arrObj.type.indexOf(value) > -1 && filteredArray.indexOf(arrObj) == -1){
               filteredArray.push(arrObj);
             }
           })
          });
          return filteredArray;
    }
  });

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-static-select-production</title>


  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>



</head>

<body ng-app="staticSelect">
  <div ng-controller="ExampleController">
    <div ng-repeat="app in apps  | multiplefilter: data.multipleSelect">
      {{app.name}}
    </div>
    <form name="myForm">
      <hr>
      <label for="multipleSelect"> Multiple select: </label>
      <br>
      <select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple>
        <option value="classA">Class A</option>
        <option value="classB">Class B</option>
        <option value="classC">Class C</option>
        <option value="classD">Class D</option>
        <option value="classE">Class E</option>
      </select>
      <br>
      <tt>multipleSelect = {{data.multipleSelect}}</tt>
      <br/>
    </form>
  </div>
</body>

</html>

【讨论】：