AngularJS filter repeater with multiple values

Question

I have a repeater which I need to filter by the text entered into a text field, so I have done this

<tr ng-repeat="i in filteredItems = (iso3166 | filter: {alpha_2: countryQuery})">

The data is a json array of objects, $scope.iso3166:

  [{
  "name": "Afghanistan",
  "alpha_2": "AF",
  "alpha_3": "AFG",
  "country-code": "004",
  "iso_3166-2": "ISO 3166-2:AF",
  "region": "Asia",
  "sub-region": "Southern Asia",
  "region-code": "142",
  "sub-region-code": "034",
  "license": "unclassified",
  "prohibited": "unclassified",
  "size": "unclassified"
}, ...

So you can type "af" and the table filters to show Afghanistan.

Now I need to have what is typed into the field return matches not just against the alpha_2 key but the name one as well. For example, "af" should match not just "Afghanistan" but also "Central African Republic".

I looked at the Angular 1.4.1 docs and saw the comma method, but it seems to perform an AND comparison. As in

<tr ng-repeat="i in filteredItems = (iso3166 | filter: {alpha_2: countryQuery, name: countryQuery })">

Is there a way do do an "or" in this case, so that whatever is typed filters to any items where the query is in "alpha_2" or "name"?

UPDATE: If anyone is curious, I wound up using a filter as suggested in an answer below:

  $scope.countryFilter = function (value) {
    if (angular.isUndefined($scope.countryQuery) || $scope.countryQuery === '') {
      return true;
    }
    return value.name.indexOf($scope.countryQuery) >= 0 || value.alpha_2.indexOf($scope.countryQuery) >= 0;
  };

yes, but that will match any field. I don't want to match "region:Africa" with "af", for example. Just the "alpha_2" or "name" fields. — Steve
– Steve, Commented Apr 29, 2016 at 19:24

Austin · Accepted Answer · 2016-04-29 19:44:52Z

2

Instead of doing it this way, you could specify the name of a function to filter the results and then implement the filtering logic in your controller.

<tr ng-repeat="i in filteredItems = (iso3166 | filter: filterFn)">

In controller:

scope.filterFn = function(item) {
    if(//item meets criteria) {
        //returning true will put the item into the ng-repeat data
        return true;
    }
    return false;
}

answered Apr 29, 2016 at 19:44

Austin

1,29110 silver badges19 bronze badges

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

1 Comment

Steve Over a year ago

i wound up writing a filter. I still prefer doing it in the html, but it was faster.

Rob · Accepted Answer · 2016-04-29 19:44:58Z

0

You can apply properties to the ng-repeat filter like this:

https://jsfiddle.net/pzek3tmy/

Controller

function Controller($scope) {
      var vm = this;

      vm.regions = [{
        "name": "Afghanistan",
        "alpha_2": "AF",
        "alpha_3": "AFG",
        "country-code": "004",
        "iso_3166-2": "ISO 3166-2:AF",
        "region": "Asia",
        "sub-region": "Southern Asia",
        "region-code": "142",
        "sub-region-code": "034",
        "license": "unclassified",
        "prohibited": "unclassified",
        "size": "unclassified"
      }, {
        "name": "Germany",
        "alpha_2": "GN",
        "alpha_3": "AFG",
        "country-code": "004",
        "iso_3166-2": "ISO 3166-2:AF",
        "region": "Asia",
        "sub-region": "Europe",
        "region-code": "143",
        "sub-region-code": "034",
        "license": "unclassified",
        "prohibited": "unclassified",
        "size": "unclassified"
      }];
    }

HTML

<div ng-controller="Controller as ctrl">
  <input type="text" ng-model="region_filter">
  <ul>
    <li ng-repeat="region in ctrl.regions | filter:{'alpha_2':region_filter} | filter:{'name':region_filter}">{{region.name}}       </li>
  </ul>
</div>

answered Apr 29, 2016 at 19:44

Rob

1,8502 gold badges12 silver badges19 bronze badges

1 Comment

Dylan Watt Over a year ago

This will only return matches that match both (AND), the question was how to match (OR). In your example 'Germany' won't return the Germany result.

Collectives™ on Stack Overflow

AngularJS filter repeater with multiple values

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related