Код Javascript для фильтра валюты в AngularJS не работает с пользовательскими символами

У меня есть следующий настраиваемый фильтр, который либо возвращает строку «Недоступно», если ввод равен нулю, либо возвращает ввод после применения к нему пользовательского символа валюты (в данном случае символ рупии). Вот код:

(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}}

Я упускаю что-то очевидное? Если нет, есть ли обходной путь для этого?


javascript angularjs currency-formatting angularjs-filter
person SpiderWasp42    schedule 29.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы используете $filter('currency')(input,"&#8377",0); внутри пользовательского фильтра, «₹» — это просто строка. Он никогда не декодируется в соответствующий объект HTML.

Если вы передадите его в фильтр из HTML, он будет работать нормально, поскольку HTML декодирует его до того, как он попадет в фильтр.

В противном случае, если вы хотите жестко закодировать значение в своем JavaScript, вам нужно будет декодировать его самостоятельно. Есть несколько примеров на SO, которые легко найти, например, этот ответ, который я использовал ниже для жесткого закодированный пример.

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>

person Jaydo    schedule 29.04.2016