Question

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

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>

Answer 1

该过滤器的源代码（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，+ Infinity和-Infinity

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

Answer 2

由于未在范围内使用@定义list-property，因此不会对其进行评估。

所以你把它放在那里：是的，你需要范围。$ eval。

但是您可以将其更改为：

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

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

货币过滤器是否仅使用$ scope使用数字。$ eval（）？

2 个答案: