Директива форматирования денег в Angular

мне нужна директива для фильтрации поля для валюты, поэтому пользователю просто нужно ввести и десятичное число подразумевается.

потребности:

  1. формат десятичного поля как типы пользователей -

начните с сотых мест по мере ввода пользователем. Так они типа "4" и ГУО "0.04", тип "42" и ГУО "0.42", тип 298023 и увидеть "2980.23"

  1. поле должно быть числом
  2. должны допустить, негативы -
  3. разрешить 0.00 в качестве числового ввода
  4. в идеале будет использовать type= "number", но" type=text " в порядке
  5. вы должны иметь возможность очистить поле, чтобы быть пустым.

фильтр ng-валюты не выполняет эти требования как есть. Пожалуйста, посмотрите поведение в plunkers, чтобы понять, что я имею в виду.

мой Первый Plunker имеет 'input = text' и допускает отрицательные числа. Одна из проблем заключается в том, что вы не можете ввести негатив как самый первый номер. Когда вы очищаете поле, оно возвращается к "0.00", но оно должно быть полностью очищено.

   app.directive('format', ['$filter', function ($filter) {
 return {
            require: 'ngModel', //there must be ng-model in the html
            link: function (scope, elem, attr, ctrl) {
                if (!ctrl) return;

                ctrl.$parsers.unshift(function (viewValue, modelValue) {
                    var plainNumber = viewValue.replace(/[^-+0-9]/g,'');
                    var newVal = plainNumber.charAt(plainNumber.length-1);
                    var positive = plainNumber.charAt(0) != '-';
                    if(isNaN(plainNumber.charAt(plainNumber.length-1))){
                      plainNumber = plainNumber.substr(0,plainNumber.length-1)
                    }
                    //use angular internal 'number' filter
                    plainNumber = $filter('number')(plainNumber / 100, 2).replace(/,/g, '');
                    if(positive && newVal == '-'){
                      plainNumber = '-' + plainNumber;
                    }
                    else if(!positive && newVal == '+'){
                      plainNumber = plainNumber.substr(1);
                    }
                    plainNumber.replace('.', ',');

                    //update the $viewValue
                    ctrl.$setViewValue(plainNumber);
                    //reflect on the DOM element
                    ctrl.$render();
                    //return the modified value to next parser
                    return plainNumber;
                });
            }
        };

}]);

мой Второй Plunker и input = text и учитывает отрицательный входной сигнал. Как и первый планкер, он не позволит отрицательный как первый символ, только после ввода чисел. Во-вторых, она начинается на десятых местах, а не на сотых. (если вы наберете "3", вы увидите "0.03", но здесь он показывает "0.3")

app.directive('inputRestrictor', [function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModelCtrl) {
            var pattern = /[^.0-9+-]/g;

            function fromUser(text) {
                if (!text)
                return text;

                var rep = /[+]/g;
                var rem = /[-]/g;
                rep.exec(text);
                rem.exec(text);

                var indexp = rep.lastIndex;
                var indexm = rem.lastIndex;
                text = text.replace(/[+.-]/g, '');
                if (indexp > 0 || indexm > 0) {
                    if (indexp > indexm) text = "+" + text; // plus sign?
                    else text = "-" + text;
                }

                var transformedInput = text.replace(pattern, '');
                transformedInput = transformedInput.replace(/([0-9]{1,2}$)/, ".")
                ngModelCtrl.$setViewValue(transformedInput);
                ngModelCtrl.$render();
                return transformedInput;
            }

            ngModelCtrl.$parsers.push(fromUser);
        }
    };
}]);

как я могу примирить эти решения или адаптировать к требованиям? Я хочу избежать дополнительных библиотек или дополнений. Мне сказали, что лучший подход-изучить источник фильтра валюты и воссоздать этот фильтр с дополнительными требованиями.Я бы с удовольствием это сделал, но у меня действительно нет навыков для этого прямо сейчас. Эти две директивы-все, что у меня есть.

12
angularjs angularjs-directive currency format javascript

3 ответов

.: Обновлен Ответ - 14 Июля ::.

проверьте эту простую директиву:

app.directive('price', [function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            attrs.$set('ngTrim', "false");

            var formatter = function(str, isNum) {
                str = String( Number(str || 0) / (isNum?1:100) );
                str = (str=='0'?'0.0':str).split('.');
                str[1] = str[1] || '0';
                return str[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, ',') + '.' + (str[1].length==1?str[1]+'0':str[1]);
            }
            var updateView = function(val) {
                scope.$applyAsync(function () {
                    ngModel.$setViewValue(val || '');
                    ngModel.$render();
                });
            }
            var parseNumber = function(val) {
                var modelString = formatter(ngModel.$modelValue, true);
                var sign = {
                    pos: /[+]/.test(val),
                    neg: /[-]/.test(val)
                }
                sign.has = sign.pos || sign.neg;
                sign.both = sign.pos && sign.neg;

                if (!val || sign.has && val.length==1 || ngModel.$modelValue && Number(val)===0) {
                    var newVal = (!val || ngModel.$modelValue && Number()===0?'':val);
                    if (ngModel.$modelValue !== newVal)
                        updateView(newVal);

                    return '';
                }
                else {
                    var valString = String(val || '');
                    var newSign = (sign.both && ngModel.$modelValue>=0 || !sign.both && sign.neg?'-':'');
                    var newVal = valString.replace(/[^0-9]/g,'');
                    var viewVal = newSign + formatter(angular.copy(newVal));

                    if (modelString !== valString)
                        updateView(viewVal);

                    return (Number(newSign + newVal) / 100) || 0;
                }
            }
            var formatNumber = function(val) {
                if (val) {
                    var str = String(val).split('.');
                    str[1] = str[1] || '0';
                    val = str[0] + '.' + (str[1].length==1?str[1]+'0':str[1]);
                }
                return parseNumber(val);
            }

            ngModel.$parsers.push(parseNumber);
            ngModel.$formatters.push(formatNumber);
        }
    };
}]);

и используйте его так:

<input type="text" ng-model="number" price >

смотрите, как он живет в этом PLUNKER (14 июля)

8

Я думаю, что это может полностью заполнить ваше требование

https://github.com/FCSAmerica/angular-fcsa-number

вы можете ограничить вход, который позволяет только числа с десятичными знаками по умолчанию угловых входных проверок или с помощью кода char.

3

Угловое Числовые

Angular Numeric-сложная директива, реализующая полное числовое поле ввода.

очень прост в использовании, но мощный.

<input numeric min="-20" max="100" decimals="3" />

существуют проверки значений min и max. Когда значение падает ниже минимальное значение установлено на минимальное значение. Когда значение превышает maxiumum, значение установлено на максимум.

форматирование выполняется в событии размытия; разделитель тысяч и десятичное число основаны на текущей угловой локали.

количество десятичных знаков может быть установлено.

https://www.npmjs.com/package/angular-numeric-directive

1