Angularjs number $ filter директива на входе требует, чтобы пользователь дважды нажимал десятичную - PullRequest
Новая
       27

Angularjs number $ filter директива на входе требует, чтобы пользователь дважды нажимал десятичную

0 голосов
/ 05 сентября 2018

Я пытаюсь ограничить вход только цифрами и десятичной дробью, установить максимальный размер дроби до 2, замаскировать viewValue запятыми и сохранить modelValue как число. Приведенный ниже код работает почти идеально, за исключением того, что для добавления десятичной дроби пользователь должен дважды нажать клавишу .. Любые идеи, почему первая печать снимает десятичную? 

var app = angular.module('myApp', []);
app.controller('pageCtrl', function($scope){
    $scope.myModel = 0;
});

app.directive('formatter', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl || !attrs.formatter) return;
            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.formatter)(ctrl.$modelValue, 2)
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var plainNumber = viewValue.replace(/[^0-9.]/g, '');
                var fractionSize = 0;
                if (plainNumber.indexOf('.') >= 0) {
                    var parts = plainNumber.split('.');
                    fractionSize = parts[1].length > 2 ? 2 : parts[1].length;
                }
                elem.val($filter(attrs.formatter)(plainNumber, fractionSize));

                return plainNumber;
            });
        }
    };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="myApp">
   <div ng-controller="pageCtrl">
      <input formatter="number" ng-model="myModel">
      {{ myModel }}
   </div>
</body>

1 Ответ

0 голосов
/ 05 сентября 2018

Это потому, что фильтр number в AngularJS удаляет десятичную дробь, когда предоставленный аргумент fractionSize равен нулю.

Вы можете подтвердить это сами: 

<!-- 2 -->
{{ 2. | number:0 }}

Чтобы обойти это, просто примените фильтр number условно: 

elem.val(fractionSize ? $filter(attrs.formatter)(plainNumber, fractionSize) : plainNumber);
...