filter select multiple angularJS

Question

I'm a beginner with Angular and i have a multiple select in order to filter a list by name.

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

I can filter with only one value by doing this :

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

but in my case i want to pass an array to the filter in order to filter with multiple values in same time

I must to create my own filter to do this ?

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

Thanks

tymeJV · Accepted Answer · 2015-01-28 16:43:29Z

1

You can make a custom filter and pre-define some filter values:

<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;
    });
}

answered Jan 28, 2015 at 16:43

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

micha · Accepted Answer · 2015-01-28 17:54:41Z

0

  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;             
        });
      };

    }
  }

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

answered Jan 28, 2015 at 17:54

micha

1,23810 silver badges7 bronze badges

1 Comment

Dujard Over a year ago

Thanks it works. i just added a condition to display all datas by default without filter.

Collectives™ on Stack Overflow

filter select multiple angularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related