货币过滤器是否仅适用于使用 $scope.$eval(） 的数字

Is currency filter works with numbers only using $scope.$eval()?

本文关键字：eval scope 数字 是否 过滤器 适用于 货币      更新时间：2023-09-26

我试图创建一个自定义指令，其中选项作为属性传递。我注意到货币过滤器仅适用于数字，如果仅与某些字符串属性一起使用，则它不起作用。如果我尝试将此过滤器与具有字符串的属性一起使用，它不会生成任何结果。是这样吗？如果需要，如何使用带有字符串值的货币过滤器？

var app = angular.module('myApp', []);
app.controller('defaultCtrl', ['$scope', function($scope) {
  $scope.products = [
    {
      name: "Apples",
      category: "Fruits",
      price: 1.20,
      expiry: 10
    }, {
      name: "Bananas",
      category: "Fruits",
      price: 2.42,
      expiry: 7
    }, {
      name: "Pears",
      category: "Fruits",
      price: 2.02,
      expiry: 6
    } 
  ];
}]);
app.directive('unorderedList', function() {
  return function(scope, element, attrs) {
    var data = scope[attrs["unorderedList"]];
    if(angular.isArray(data)) {
      var listElem = angular.element('<ul>');
      var propertyExpression = attrs["listProperty"];
      element.append(listElem);
      for(var i = 0; i < data.length; i++) {
        listElem.append(angular.element('<li>').text(scope.$eval(propertyExpression, data[i])));
      }
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div id="wrapper" ng-controller="defaultCtrl">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3>Products</h3>
      </div>
      <div class="panel-body">
        <div unordered-list="products" list-property="price | currency"></div>
        <div unordered-list="products" list-property="name | currency"></div>
      </div>
    </div>
  </div>
</div>

该过滤器的源代码（currency）代表

currencyFilter.$inject = ['$locale'];
function currencyFilter($locale)
{
    var formats = $locale.NUMBER_FORMATS;
    return function(amount, currencySymbol, fractionSize)
    {
        if (isUndefined(currencySymbol))
        {
            currencySymbol = formats.CURRENCY_SYM;
        }
        if (isUndefined(fractionSize))
        {
            fractionSize = formats.PATTERNS[1].maxFrac;
        }
        // if null or undefined pass it through
        return (amount == null)
            ? amount
            : formatNumber(amount, formats.PATTERNS[1], formats.GROUP_SEP, formats.DECIMAL_SEP, fractionSize).replace(/'u00A4/g, currencySymbol);
    };
}

现在formatNumber的代码开始

如下 
function formatNumber(number, pattern, groupSep, decimalSep, fractionSize) {
  if (!(isString(number) || isNumber(number)) || isNaN(number)) return '';

和 angular.isNumber 指出

确定引用是否为数字。

这包括"特殊"数字NaN，+无穷大和-无穷大

因此，formatNumber(...)苹果和香蕉只需返回''（空字符串）

由于列表属性未在 @ 的作用域中定义，因此不会对其进行评估。

所以正如你所说的那样：是的，你需要范围.$eval。

但是，您可以将其更改为： 

list-property="{{price | currency}}"

并删除指令中的范围.$eval。这应该有效。

相关文章：