Ограничить количество десятичных знаков в поле ввода html5 type = "number" (с помощью модели Angularjs)

Найдите скрипку http://jsfiddle.net/q2SgJ/5/

<div ng-app="">
  <div ng-controller="Ctrl">

      WANTS:  {{val | number:2}} in "input" elelent<br>
    2 decimal in input:  <input  ng-model='val'> <br>
    2 decimal in input:  <input  type="number" step="0.01" ng-model='val'><br>
    2 decimal in input:  <input  ng-model='val' value="{{val |number:2}}"> <br>

  </div>
</div>

Как я могу ограничить десятичные знаки до двух цифр в поле INPUT. Как и в примере {{val | number:2}} работает, но не уверен, как использовать его для форматирования ng-модели, прикрепленной к полю. Я мог бы форматировать сами данные/модель, но у меня есть несколько значений, которые мне нравятся, чтобы сохранить дополнительные десятичные числа, но отображать только 2 десятичных числа.

Спасибо.

Ответ 1

Вы можете написать директиву для управления этой функциональностью. Это не то, что поставляется с angular, но директивы могут контролировать, как все выглядит и работает на странице.

Я написал простой: http://jsfiddle.net/q2SgJ/8/

Это функция связывания, которая выполняет трюк:

   link:function(scope,ele,attrs){
        ele.bind('keypress',function(e){
            var newVal=$(this).val()+(e.charCode!==0?String.fromCharCode(e.charCode):'');
            if($(this).val().search(/(.*)\.[0-9][0-9]/)===0 && newVal.length>$(this).val().length){
                e.preventDefault();
            }
        });
    }

Это работает при ограничении ввода до двух знаков после запятой, но не форматирует входные данные до двух знаков после запятой. В любом случае, это отправная точка. Я уверен, что вы можете найти другие примеры и написать свою собственную директиву, чтобы справиться с этим так, как вы хотите. Дело в Angular заключается в том, что это не фреймворк с ответом на каждый вопрос, а структура, которая позволяет вам создавать дополнительные функции, чем то, что предлагает HTML5, и делает его очень простым.

Ответ 2

Вы можете сделать это без JQuery и без директивы. Ваша первоначальная попытка с шагом была очень близка. Я нашел этот сайт, который показывает, как использовать входы HTML5, чтобы ограничить использование фильтров ввода регулярных выражений Step и AngularJS.

<div ng-app="app">
    <div ng-controller="Ctrl"> @*Just an empty controller in this example*@
        <form name="myForm">
            <input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" /><br />
            Is a valid decimal?<span ng-show="!myForm.myDecimal.$valid">{{myForm.myDecimal.$valid}}</span>
        </form>
    </div>
</div>

Ответ 3

Я расширил принятый ответ, чтобы посмотреть на атрибут step при определении того, сколько десятичных знаков ограничено.

directive('forcePrecision', function () {
    return {
        restrict: 'A',
        scope: {
           step: '@'
        },
        link: function (scope, element, attrs) {
            if (!scope.step || scope.step == 'any') {
               return;
            }

            var prec = 1;
            for (var i = scope.step; i != 1; i *= 10) {
                prec *= 10;
            }

            element.on('keypress', function (e) {
                var val = Number(element.val() + (e.charCode !== 0  ? String.fromCharCode(e.charCode) : ''));

                if (val) {
                    var newVal = Math.floor(val * prec) / prec;

                    if (val != newVal) {
                        e.preventDefault();
                    }
                }
            });
        }
    };
});