AngularJS. Filter array by array

Question

I have data structure like this:

$scope.data = [
  {
    title: "Title1",
    countries: ['USA', 'Canada', 'Russia']
  },
  {
    title: "Title2",
    countries: ['France', 'Germany']
  }
];

I.e. each item has array of country names.

I'm showing this data like this:

<tr ng-repeat="dataItem in data">

I want allow user to filter this list by providing list of countries in input:

enter image description here

How to acheive this?

Currently I'm did something like this:

  <input ng-model="searchFilter.countries">
   ...
  <tr ng-repeat="dataItem in data | filter: searchFilter: true">

But obviously it works only for 1 country, not for array of countries listed in input using comma.

It would be much easier if you create a JSFiddle

Sreenath Nannat
– Sreenath Nannat

2014-07-09 13:05:00 +00:00
Commented Jul 9, 2014 at 13:05 — Sreenath Nannat
– Sreenath Nannat, Commented Jul 9, 2014 at 13:05

Raghavendra · Accepted Answer · 2014-07-09 17:17:24Z

2

A simple solution, without a custom filter:

HTML:

<input ng-model="countries" ng-list>

<tr ng-repeat="dataItem in data | filter:countryFilter">

JS:

$scope.countryFilter = function(dataItem) {
    if (!$scope.countries || $scope.countries.length < 1)
        return true;
    var matched = false;
    $scope.countries.filter(function(n) {
        matched = matched || dataItem.countries.indexOf(n) != -1
    });
    return matched;
};

DEMO PLUNKR

answered Jul 9, 2014 at 17:17

Raghavendra

5,4074 gold badges39 silver badges53 bronze badges

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

Comments

boindiil · Accepted Answer · 2014-07-09 13:28:06Z

1

I have created an example here.

It takes use of ngList as Zahori recommended and defines a custom filter for countries.

myApp.filter('MyFilter', function() {
    return function(items, countries) {
        if (!angular.isUndefined(items) && !angular.isUndefined(countries) && countries.length > 0) {
            var filtered = [];

            angular.forEach(items, function(item) {
                angular.forEach(countries, function(currentCountry) {
                     if(item.countries.indexOf(currentCountry) >= 0 ) filtered.push(item);
                });

            });

            return filtered;
        } else {
            return items;
        }
    };
});

edited Jul 9, 2014 at 13:28

answered Jul 9, 2014 at 13:13

boindiil

5,8652 gold badges31 silver badges31 bronze badges

Comments

Zahori · Accepted Answer · 2014-07-09 12:49:56Z

0

Your Input is just a String and not an Array. You can use ngList for this purpose.

Here is a good example how to use it: https://docs.angularjs.org/api/ng/directive/ngList

answered Jul 9, 2014 at 12:49

Zahori

11 silver badge2 bronze badges

Comments

Niels Steenbeek · Accepted Answer · 2014-07-09 13:13:10Z

0

searchFilter should be a method on your $scope. Otherwise by default it searches on string only.

$scope.searchFilter = function (dataItem) {
    //your search logic here and return true/false.
};

answered Jul 9, 2014 at 13:13

Niels Steenbeek

4,8542 gold badges44 silver badges51 bronze badges

Collectives™ on Stack Overflow

AngularJS. Filter array by array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related