angularjs directive to manipulate text values

Question

I want to create angular directives to change or format binded text values.

My values are like this: var priceList = [12.90, 15.90, 80, 55.90];

I want to use a directive and write priceList values as currency format.

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

and directive

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);
            }
        }
    }]);

how can I get <span currency>{{price}}</span> element price value and change in directive.

e666 · Answer 1 · 2015-11-13T14:45:10.187

3

More simple than a directive, you can use the currency filter to format your data with currency. It already exists in Angular. Filters are used to format displayed data in Angular.

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

See the docs for more details (you can add a symbol if you want).

edited Nov 13 '15 at 14:45

answered Nov 13 '15 at 14:44

e666

1,305
11
20

Beat me to it. This is definitely the way to go. – ryanyuyu Nov 13 '15 at 14:44
But I need some other directives that I should write my own. currency is only one of them. For example splitting, concating, .... So I need custom filter not directives. – barteloma Nov 13 '15 at 14:56

score 0 · Answer 2 · edited May 23 '17 at 11:51

@e666's answer will get you to the desired end result. If you're looking to do the work inside the directive you're going to have to access the bound value of the variable directly.

Before we crack into that, I just want to point out that there are two barriers inside the code as written that we should address before moving on. The first is that var priceList = [ 12.90, 15.90, 80, 55.90 ]; isn't currently on $scope. We can fix this by defining it as $scope.priceList = [ 12.90, 15.90, 80, 55.90 ];.

Next, you'll need to ensure that your ng-repeat is assigned a value. ng-repeat"price in priceList" should therefore be rewritten as an assignment of ng-repeat="price in priceList". You'll then have access to scope.price inside the directive. Sorry for the fussy little details, but they needed to be addressed in order to get price into your directive's scope.

As for the directive, as it sits currently, element.html() will return a value of {{price}}, so that's not what we want. Since scope.price is bound data, we can now modify it directly inside the directive to achieve the desired result.

So your HTML will be slightly modified as outlined above:

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

and your directive will be:

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 + "$";
      }
    }
  }]);

Please keep in mind that this is going to return a list with the "$" appended to the end of the string, so the output will be:

12.9$
15.9$
80$
55.9$

Lastly, here's a little (tangentially) related reading for you: Using Filters With Directives in AngularJS

score 0 · Accepted Answer · answered Nov 13 '15 at 15:51

It may be that you're looking to write your own custom filters, so here's some literature on how to do that: https://docs.angularjs.org/guide/filter

Consider the following code:

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

This will do what you have outlined above if you change your html to read:

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

angularjs directive to manipulate text values

3 Answers3