javascript - 使用不同过滤器的 Angular JS ng-repeat

Question

我有一个小问题。

我有这个 json 对象

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

我想将它与 ng-repeat 一起使用

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

在 ng-repeat 中如何实现此行为以实现预定义过滤器？

Answer 1

如果我没理解错的话，你想要得到类似的东西

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

但是当尝试解析表达式时 Angular 引发错误，而不是从变量中获取过滤器名称。所以你可以添加一个过滤器，它将按名称应用于源过滤器，比如

.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>