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

您可以构建一个过滤器来调用您的客户过滤器，如下所示：

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

我为您创建了一个示例here

Answer 2

如果我理解正确，你想得到像

这样的东西

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

但是在尝试解析表达式时会出现角度提升错误，而是从变量中获取过滤器名称。因此，您可以添加一个过滤器，该过滤器将按名称应用于源过滤器，例如

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

Angular JS ng-repeat与不同的过滤器

2 个答案: