使用逐角下拉过滤json数据

时间:2015-08-30 15:54:57

标签: javascript json angularjs

我正在尝试过滤掉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

EX。如果用户选择A类和B类,那么输出将是名称1,名称2,名称5

1 个答案:

答案 0 :(得分:0)

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



<!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>
&#13;
UIView
&#13;
&#13;
&#13;