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
我给你们举了个例子。