2016-04-28 10 views
-2

Blockquote Bei Feld Höhe seiner Aufnahme 3 ganzzahliger Wert, seine korrekte, aber danach ist es 2 floating Wert annehmen muss, zum Beispiel 555,34 sogar i Schritt verwende = „0,01“, und max = "3", aber auf keypress seinen keinen float-Wert nach 3 Ziffer Einnahme BlockquoteEingabebox nicht Gleitkommawert unter

var app = angular.module('Calc', []); 
 
var inputQuantity = []; 
 
    $(function() { 
 
     $(".form-control").each(function(i) { 
 
     inputQuantity[i]=this.defaultValue; 
 
     $(this).data("idx",i); // save this field's index to access later 
 
     }); 
 
     $(document).on("keypress",".form-control", function (e) { 
 
     var $field = $(this), 
 
      val=this.value+''+String.fromCharCode(e.charCode),pattern; 
 
     if(this.step==0.00) 
 
      pattern=/[^0-9]/ 
 
      else 
 
      pattern=/[^0-9.]/ 
 
     if (val>parseInt(this.max,10)||pattern.test(val)|| (val.match(/\./) && (val.match(/\./g).length>1 || val.replace(/\d+\./,'').length>2))) { 
 
       e.preventDefault(); 
 
     } 
 
     });  
 
    }); 
 
app.controller('Calc_Ctrl', function ($scope, $http) { 
 
    $scope.choices = [{id : 'choice1', l2 : 0, b2 : 0}]; 
 
    $scope.areas = [{id : 'choice2', total : 0}]; 
 

 
    $scope.addNewChoice = function() { 
 
      var newItemNo = $scope.choices.length + 1; 
 
      $scope.choices.push({ 
 
       'id' : 'choice' + newItemNo, l2 : 0, b2 : 0 
 
      }); 
 
    }; 
 
    $scope.removeChoice = function() { 
 
      var lastItem = $scope.choices.length - 1; 
 
      if (lastItem !== 0) { 
 
       $scope.choices.splice(lastItem); 
 
      } 
 
    }; 
 
});
<!DOCTYPE html> 
 
<html> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="newscript.js"></script> 
 

 
<body> 
 
    <div ng-app="Calc" ng-controller="Calc_Ctrl"> 
 
       <div data-ng-repeat="choice in choices" class="col-md-12 col-sm-12 col-xs-12 bottom-line no-gap"> 
 
           <h6>Open New Row {{$index + 1}} 
 
            <button type="button" class="btn btn-default pull-right btn-right-gap btn-red" aria-label="Left Align" ng-click="addNewChoice()" style="margin-top: -5px;" id="plus_icon"> 
 
             <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
 
            </button> 
 

 
           </h6> 
 
           <div class="row walls top-gap"> 
 

 
            <div class="form-group col-md-3 col-sm-3 col-xs-12"> 
 
             <label for="length">Length :</label> 
 
             <input type="number" class="form-control text-red bold" id="length" ng-model="choice.l2" min="0" max="999" maxlength="6" step="0.00"> 
 
            </div> 
 
            <div class="form-group col-md-3 col-sm-3 col-xs-12"> 
 
             <label for="height">Height :</label> 
 
             <input type="number" class="form-control text-red bold" id="height" ng-model="choice.b2" min="0" max="999" maxlength="6" step="0.01"> 
 
            </div> 
 
            
 
            <button type="button" class="btn btn-default pull-right btn-red" aria-label="Left Align" ng-click="removeChoice()" id="minus_icon"> 
 
            </button> 
 
           </div> 
 

 
         </div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

hier schöne Werke [link] (http://plnkr.co/edit/z24mAf6XAeXe714BqWbY?p=preview) –

+0

@SatejS seine nicht funktioniert, seine die n Anzahl der Integer übernimmt und Zeichen, das ist falsch es muss nur 3 Ganzzahl und 2 Gleitkommawert nehmen zB 123.33 – bhatt

+0

Sorry, daran arbeiten. –

Antwort

0

Also habe ich weitergemacht und Echt ly vereinfacht diesen Code. Ich verstehe, dass Sie sich mit dem Wert beschäftigt haben, der dem Format entspricht, das ungefähr so ​​aussieht wie 123.33.

Ich habe die ng-pattern im Eingabetyp verwendet, um sicherzustellen, dass die Eingabe mit dem erforderlichen Muster übereinstimmt.

Die Regex

[0-9]{3}[.][0-9]{2} 

Die HTML

<input type="number" class="form-control text-red bold" id="length" ng-model="choice.l2" ng-pattern="/[0-9]{3}[.][0-9]{2}/" min="0" max="999" maxlength="6" step="0.00"> 

Die Länge und Höhe Felder nur gültig ist, wenn Sie die Eingabe der erforderlichen regex erfüllt.

Hier ist ein demo

+0

Entschuldigung zu sagen, aber wieder seine n Zahl der Ziffer, die Sie in pulnker veröffentlicht – bhatt

+0

Ja, es wird 'n' Anzahl der Ziffern, aber das Feld wird nicht gültig sein, bis es das erforderliche Muster entspricht.Dies ist genau die Schönheit von Angular, können Sie die Eingabe gegen ein Muster validieren.Wenn es nicht gültig ist Es wird dem ng-Modell nicht den Wert zugewiesen. –

+0

es ist in Ordnung für eine Entwickleransicht, aber als Benutzeransicht ist es nicht gültig, weil Benutzer leider nicht die Schönheit von eckigen kennt – bhatt

Verwandte Themen