我有以下自定义过滤器,如果输入等于零,则返回“不可用”字符串,或者在应用自定义货币符号后返回输入(在本例中为卢比符号)。这是代码:
(function(){
angular.module('TestApp')
.filter('availability', function($filter){
return function(input){
if(input == null){
return "Not Available";
}
var test = $filter('currency')(input,"₹",0);
return test;
}
});
})();
但是,没有达到预期的效果。而是在输入前面打印货币符号的原始字符串。我在我的HTML代码中使用了相同的货币符号,如下所示,它可以工作:
{{value.Charge | currency:"₹":0}}
我错过了一些明显的东西吗?如果没有,是否有解决方法?
答案 0 :(得分:0)
在自定义过滤器中使用$filter('currency')(input,"₹",0);
时,“&#8377”只是一个字符串。它永远不会被解码为相应的HTML实体。
如果您将其从HTML传递到过滤器中,它将正常工作,因为HTML在它到达过滤器之前对其进行解码。
否则,如果您想对JavaScript中的值进行硬编码,则需要自行解码。在SO上有一些容易找到的例子,例如我在下面用于硬编码示例的answer。
angular.module("app", [])
.controller("controller", function($scope) {
$scope.amount = 32;
})
.filter('availability', function($filter) {
return function(input, symbol) {
console.log(symbol);
if (input == null) {
return "Not Available";
}
var test = $filter('currency')(input, symbol, 0);
return test;
}
})
.filter('hardcoded', function($filter) {
return function(input) {
if (input == null) {
return "Not Available";
}
var test = $filter('currency')(input, decodeEntities("₹"), 0);
return test;
}
});
// From https://stackoverflow.com/questions/5796718/html-entity-decode/9609450#9609450
var decodeEntities = (function() {
// this prevents any overhead from creating the object each time
var element = document.createElement('div');
function decodeHTMLEntities (str) {
if(str && typeof str === 'string') {
// strip script/html tags
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
element.innerHTML = str;
str = element.textContent;
element.textContent = '';
}
return str;
}
return decodeHTMLEntities;
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<input ng-model="amount" />
<p>
Currency Filter: {{amount | currency:"₹":0}}
</p>
<p>
Custom Filter: {{amount | availability:"₹"}}
</p>
<p>
Hard-coded string in Custom Filter: {{amount | hardcoded}}
</p>
</div>