使用angular by下拉列表过滤json数据

Question

I am trying to filter out json data. 我正在尝试过滤掉json数据。 This is what i did. 这就是我所做的。

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 柱塞

And this one is doing well when user select only one value from the list and "type" is not a array.But,I want to know how can i filter the data which is like below and user can select multiple value from a list and data will be filtered by taking the OR condition in to consideration. 当用户仅从列表中选择一个值并且“类型”不是数组时，这种方法效果很好。但是，我想知道如何过滤如下所示的数据，并且用户可以从列表中选择多个值，数据将通过考虑“或”条件进行过滤。

$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 柱塞

EX. 例如 if user select class A and Class B then output will be Name 1, Name 2, Name 5 如果用户选择A类和B类，则输出将为Name 1，Name 2，Name 5

Answer 1

You need to make your own filter for this purpose. 为此，您需要制作自己的过滤器。
Here is the Demo . 这是演示。 Go through tutorial about how to make custom filters. 阅读有关如何制作自定义过滤器的教程。

  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>

使用angular by下拉列表过滤json数据

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-08-30 16:51:19

使用angular by下拉列表过滤json数据

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-08-30 16:51:19

解决方案1
0 已采纳 2015-08-30 16:51:19