AngularJS中的货币过滤器的Javascript代码不使用自定义符号

时间:2016-04-29 05:08:06

标签: javascript angularjs angularjs-filter currency-formatting

我有以下自定义过滤器,如果输入等于零,则返回“不可用”字符串,或者在应用自定义货币符号后返回输入(在本例中为卢比符号)。这是代码:

(function(){

   angular.module('TestApp')
   .filter('availability', function($filter){
        return function(input){
            if(input == null){
              return "Not Available";
            }
            var test = $filter('currency')(input,"&#8377",0);
            return test;
        }
   });

})();

但是,没有达到预期的效果。而是在输入前面打印货币符号的原始字符串。我在我的HTML代码中使用了相同的货币符号,如下所示,它可以工作:

{{value.Charge | currency:"₹":0}}

我错过了一些明显的东西吗?如果没有,是否有解决方法?

1 个答案:

答案 0 :(得分:0)

在自定义过滤器中使用$filter('currency')(input,"&#8377",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:"&#8377;":0}}
  </p>
  <p>
    Custom Filter: {{amount | availability:"&#8377;"}}
  </p>
  <p>
    Hard-coded string in Custom Filter: {{amount | hardcoded}}
  </p>
</div>