问题描述
我有一个小问题。
我有这个 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实现此行为以实现预定义的过滤器？
1楼
Qi Tang
1
2015-07-30 14:13:43
您可以构建一个过滤器来调用您的客户过滤器，如下所示：
filter('invokerFilter', function($filter) {
return function(value ,filterName) {
return $filter(filterName)(value) ;
};
我在为您创建了一个示例
2楼
Grundy
1
2015-07-30 14:54:01
如果我理解正确，你想要得到类似的东西
<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>