Question

我想创建角度指令来更改或格式化绑定的文本值。

我的价值观是这样的：var priceList = [12.90, 15.90, 80, 55.90];

我想使用指令并将priceList值写为货币格式。

<li ng-repeat"price in priceList">
    <span currency>{{price}}</span>
</li>

和指令

angular
    .module("app.financal")
    .directive("currency", [function () {
        return {
            restrict: "A",
            link: function (scope, element, attribute) {
                // if currency vale is not null.
                var curr = element.html() + "$";

                element.html(curr);
            }
        }
    }]);

如何获取<span currency>{{price}}</span>元素price值并更改指令。

Answer 1

比指令更简单，您可以使用currency过滤器使用货币格式化数据。它已经存在于Angular中。过滤器用于格式化Angular中的显示数据。

<li ng-repeat"price in priceList">
    <span>{{price | currency}}</span>
</li>

有关详细信息，请参阅docs（如果需要，可以添加符号）。

Answer 2

@ e666的答案将帮助您达到预期的最终结果。如果你想在指令中完成工作，你将不得不直接访问变量的绑定值。

在我们讨论之前，我只想指出代码中有两个障碍，我们应该在继续之前解决。第一个是var priceList = [ 12.90, 15.90, 80, 55.90 ];目前不在$ scope。我们可以通过将其定义为$scope.priceList = [ 12.90, 15.90, 80, 55.90 ];来解决此问题。

接下来，您需要确保为ng-repeat分配了一个值。因此，ng-repeat"price in priceList"应改写为ng-repeat="price in priceList"的作业。然后，您将可以访问指令中的scope.price。对于繁琐的小细节感到抱歉，但是为了让价格进入你的指令范围，需要对它们进行处理。

至于目前的指令，element.html()将返回{{price}}的值，因此这不是我们想要的。由于scope.price是绑定数据，我们现在可以直接在指令内修改它以获得所需的结果。

因此，您的HTML会略微修改，如上所述：

<li ng-repeat="price in priceList">
  <span currency>{{price}}</span>
</li>

，您的指令将是：

angular
  .module("app.financal")
  .directive("currency", [function () {
    return {
      restrict: "A",
      link: function (scope, element, attribute) {
        // if currency vale is not null.
        scope.price = scope.price + "$";
      }
    }
  }]);

请记住，这将返回一个列表，其中“$”附加到字符串的末尾，因此输出将为：

12.9 $
15.9 $
80 $
55.9 $

最后，这里有一点（切向）相关阅读： Using Filters With Directives in AngularJS

Answer 3

您可能希望编写自己的自定义过滤器，所以这里有一些关于如何做到这一点的文献： https://docs.angularjs.org/guide/filter

请考虑以下代码：

.filter('customCurrency', function() {
  return function ( input ) {
    // if currency value is not null.
    var out = input + '$';
    return out;
  };
})

如果您将html更改为：

，这将执行您上面列出的操作

<li ng-repeat="price in priceList">
  <span>{{price | customCurrency}}</span>
</li>

angularjs指令来操纵文本值

3 个答案: