过滤器选择多个angularJS

时间:2015-01-28 16:24:28

标签: javascript angularjs

我是Angular的初学者,我有一个多重选择,以按名称过滤列表。

<select multiple ng-options="data.name for data in datas" ng-model="filterData">
</select>

我可以通过这样做只过滤一个值:

<div class="container " data-ng-repeat="data in datas | filter : filterData[0].name">

但在我的情况下,我想将数组传递给过滤器,以便同时过滤多个值

我必须创建自己的过滤器才能执行此操作吗?

{
         "datas": [
            {"name": "first", "id": 1},
            {"name": "two", "id": 2},
            {"name": "three", "id": 3},
        ]
}

由于

2 个答案:

答案 0 :(得分:1)

您可以制作自定义过滤器并预先定义一些过滤器值:

<div class="container " data-ng-repeat="data in datas | filter : byArray">

var _filterTheseWords = ["first", "two", "three"];
$scope.byArray = function(item) {
    return _filterTheseWords.some(word) {
        return item.name.indexOf(word) > -1;
    });
}

答案 1 :(得分:0)

&#13;
&#13;
  var myApp = angular.module('myApp', []);

  myApp.controller('myController', myController);

  function myController($scope) {
    $scope.datas = [{
      "name": "first",
      "id": 1
    }, {
      "name": "two",
      "id": 2
    }, {
      "name": "three",
      "id": 3
    }, ];

    $scope.filterData = [];

    $scope.byArray = function(myArray) {
      return function(item) {
        return !myArray.some(function(word) {
          return item.name.indexOf(word.name) > -1;             
        });
      };

    }
  }
&#13;
<div ng-app="myApp" ng-controller="myController">
  <select multiple ng-multible="true" size="3" ng-options="data.name for data in datas" ng-model="filterData">
  </select>
  <div class="container" data-ng-repeat="data in datas | filter : byArray(filterData)">{{data.name}}
  </div>
</div>
<script src="https://code.angularjs.org/1.3.11/angular.js"></script>
&#13;
&#13;
&#13;