使用不同的滤镜进行角度JS ng-repeat

时间:2021-02-16 12:09:44

I have a small question.

我有一个小问题。

I have this json object that

我有这个json对象

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

I would like to use it with ng-repeat

我想把它和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?

如何实现这种行为,以便在ng-repeat中实现预定义的过滤器?

2 个解决方案

#1


1  

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>

#2


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

我给你们举了个例子。

#1


1  

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>

#2


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

我给你们举了个例子。