web-dev-qa-db-fra.com

Restreindre le nombre de décimales dans html5 type = champ "nombre" (avec le modèle Angularjs)

Veuillez trouver le violon 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>

Comment puis-je limiter les décimales à 2 chiffres dans un champ INPUT. Comme dans l'exemple, {{val | number:2}} fonctionne, mais vous ne savez pas comment l'utiliser pour formater le modèle ng associé à un champ. J'aurais pu formater les données/modèles eux-mêmes, mais j'ai peu de valeurs pour lesquelles je préfère conserver la décimale supplémentaire, mais seulement 2 décimales.

Merci.

javascripthtml5angularjs
15
bsr

Vous pouvez écrire une directive pour contrôler cette fonctionnalité. Ce n'est pas quelque chose qui est livré avec angular, mais les directives peuvent contrôler l'aspect et le fonctionnement de la page.

J'ai écrit un simple: http://jsfiddle.net/q2SgJ/8/

C'est la fonction de liaison qui fait l'affaire:

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

Ceci fonctionne pour limiter l'entrée à 2 décimales, mais ne formate pas l'entrée avec deux décimales. En tout cas, c'est un point de départ. Je suis sûr que vous pouvez rechercher d’autres exemples et rédiger votre propre directive pour gérer cette situation comme vous le souhaitez. La chose à propos de Angular est que ce n’est pas un cadre avec une réponse à chaque question, mais un cadre qui vous permet de créer des fonctionnalités supplémentaires à ce que HTML5 fournit seul et rend les choses très simples.

8
Tim Withers

Vous pouvez le faire sans JQuery et sans directive. Votre tentative initiale avec step était très proche. J'ai trouvé ce site qui montre comment utiliser les entrées HTML5 pour restreindre l'utilisation des filtres d'entrée des expressions régulières step et 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>
8
JabberwockyDecompiler

J'ai développé la réponse acceptée pour examiner l'attribut step lors de la détermination du nombre de décimales à limiter.

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();
                    }
                }
            });
        }
    };
});
4
dkellycollins

J'ai prolongé le violon de Tim au cas où quelqu'un cherche une solution de travail

http://jsfiddle.net/q2SgJ/653/

modification de l'événement de frappe pour récupérer la valeur d'origine typée en fonction de la position du curseur

ele.bind('keypress',function(e){
        var value = $(this).val();
                    var decimalPointPosition = value.indexOf(".");
                    if(!((e.charCode === 46) || (e.charCode > 47 && e.charCode <= 57)))
                        e.preventDefault();

                    else if (decimalPointPosition >= 0) {
                        var decimalCount = value.substring(decimalPointPosition + 1).length;
                        if ((decimalCount == 2 && $(this).prop("selectionStart") > decimalPointPosition)) {
                            e.preventDefault();                     
            }
           }       

        }
0
Casey