директива angularjs для управления текстовыми значениями

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

Может быть, вы хотите, чтобы написать свои собственные фильтры, так что здесь какая-то литература о том, как сделать что: 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> 

Answer 2

Более простую, чем директиву, вы можете использовать фильтр currency для форматирования данных с помощью валюты. Он уже существует в Угловом. Фильтры используются для форматирования отображаемых данных в Angular.

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

Смотрите docs для получения более подробной информации (вы можете добавить символ, если вы хотите).

Answer 3

@ Ответ 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