Angular JS ng-repeat with different filters

Question

I have a small question.

I have this json object that

var map = {
    key1 : {filter:'bytes',value: 100000000},
    key2 : {filter:'ratio',value: 1.25}
};

I would like to use it with ng-repeat

<div ng-repeat="key in map"> {{key.value | key.filter}}</div>

How can I accomplish this behaviour to get predefined filters implemented while in ng-repeat?

basicly your syntax shows key.value, or if that is null/undefined key.filter. You will want to tell angular to use a filter. I believe the proper way to do so is {{key.value | filter:key.filter}} — Guinn
– Guinn, Commented Jul 30, 2015 at 14:01
do you want do {{val.value | ratio }} and {{val.value | bytes}} but select filter dynamically? — Grundy
– Grundy, Commented Jul 30, 2015 at 14:28

Grundy · Accepted Answer · 2015-07-30 14:54:01Z

If i understand right, you want get something like

<div ng-repeat="key in map"> {{100000000 | bytes }}</div>
<div ng-repeat="key in map"> {{1.25 | ratio }}</div>

But angular raise error when try parse expression, instead get filter name from variable. So you can add a filter, that would be apply to source filter by name, something like

.filter('applyFilter',function($filter){
    return function(source, filterName){
        return $filter(filterName)(source);
    }
})

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.map = {
      key1: {
        filter: 'bytes',
        value: 100000000
      },
      key2: {
        filter: 'ratio',
        value: 1.25
      }
    };
  }).filter('bytes',function(){
    return function(a){
      return a + ' bytes';
    }
  }).filter('ratio',function(){
    return function(a){
      return 'ratio: ' + a;
    }
  }).filter('applyFilter',function($filter){
    return function(source, filterName){
      return $filter(filterName)(source);
      }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
      <div ng-repeat="key in map"> {{key.value | applyFilter: key.filter }}</div>
      
    </div>

Grundy · Accepted Answer · 2015-07-30 15:02:30Z

1

You can build a filter that invokes your customer filter like this:

filter('invokerFilter', function($filter) {
    return function(value ,filterName) {
        return $filter(filterName)(value) ;
};

I created an example for you here

edited Jul 30, 2015 at 15:02

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

answered Jul 30, 2015 at 14:13

Qi Tang

1,2657 silver badges18 bronze badges

3 Comments

Qi Tang Over a year ago

I did not. But I did something similar with the approach above several times.

Guinn Over a year ago

it doesnt have to be an array, it will display the key.value, filtered by key.filter. This should work. Did you try it yourself?

Grundy Over a year ago

yep, and get error Error: [filter:notarray] Expected array but received: 1.25, from doc: This error occurs when filter is not used with an array, some plunkr

Collectives™ on Stack Overflow

Angular JS ng-repeat with different filters

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related