具有不同过滤器的 Angular JS ng-repeat

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 ?

Answer 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

Answer 2

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>