Angular.js interpolation in filter parameter

Question

I have a filter on a ng-repeat, which accepts a parameter. It currently works with a string.

<div ng-repeat="(key, value) in searchData | aboutFilter:'abo'">

Is is possible to use an interpolated value in place of the string?

<div ng-repeat="(key, value) in searchData | aboutFilter:'{{list.api}}'">

Here is my filter:

app.filter('aboutFilter', function() {
return function(items, input) {
    var filtered = [];
    angular.forEach(items, function (value,key) {

      if(key===input){            
        filtered.push(value);
      }
    });
    return filtered;
}
});

Here is the complete template logic:

<ul ng-repeat="list in englishList">

  <a ng-class="{{list.title}}Hide" mobile-search-slide href="/about"><li><p>{{list.title}}</p><i class="fa fa-chevron-right"></i></li></a>

  <ul id="hideMe" ng-class="'hide{{list.title}}'">           
  <div ng-cloak ng-repeat="(key, value) in searchData | aboutFilter:'{{list.api}}'">

   <div ng-repeat="result in value" ng-class-odd="'odd'" ng-class-even="'even'">
     <a ng-href="{{value.title}}/{{result.shortname}}">
       <li>
           <p>{{result.title}}</p><i class="fa fa-chevron-right"></i>
       </li>
     </a>
    </div>  

  </div> 
  </li>
  </ul>
</ul>

@byrdr have you also removed the single quotes? How doesn't it work? — JB Nizet
– JB Nizet, Commented Apr 1, 2015 at 18:25
make a plunk, plnkr.co/edit/nn6mneFt1zJhI0v5gZCG?p=preview u see it works — Petr Averyanov
– Petr Averyanov, Commented Apr 1, 2015 at 18:26
You can just mention the model name, it will work. No need to use {{}}. Also in your filter code is matching key with input, here key is 0,1,etc index of item and you're doing strict comparison. — mohamedrias
– mohamedrias, Commented Apr 1, 2015 at 18:30

mohamedrias · Accepted Answer · 2015-04-01 18:25:59Z

3

If you want to use some ng-modelfor filter, then you can just use the model name. No need to use {{}} expression.

In your case, it will be :

 <div ng-cloak ng-repeat="(key, value) in searchData | aboutFilter:list.api">

DEMO

Remember in your filter, you are using string comparison. So the filter will check for exact matches.

And also, IN your filter:

You are comparing key with the input list.api. Here key will always be 0,1, etc index. You must be using value there instead of key

answered Apr 1, 2015 at 18:25

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

Angular.js interpolation in filter parameter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related