2016-04-28 9 views
-2

BLOCKQUOTE その服用3の整数値、その正しいをfloat値を取っていないが、その後、それは2浮動値を取る必要があり、例えば555.34 でも私は=「0.01」ステップを使用していますし、最大= "3" が、キー操作でそのは3桁 BLOCKQUOTE入力ボックスには、高さフィールドの場合

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

である[リンク](http://plnkr.co/edit/z24mAf6XAeXe714BqWbY?p=preview) –

+0

@SatejSそれが動作していない、その整数のn個を取ってそれは3つの整数と2つの浮動小数点値を取る必要があります例えば123.33 – bhatt

+0

申し訳ありませんが、それに取り組んでいます。 –

答えて

0

だから私は先に行って、実際きた後に任意のfloat値を取っていません簡単にこのコードを簡略化しました。私はあなたが123.33のようなものを作り出すフォーマットを守っていることに心配していたと思います。

入力タイプにng-patternを使用して、入力が必要なパターンと一致するようにしました。あなたの入力が必要な正規表現を満たしている場合

正規表現

​​

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"> 

長さと高さのフィールドが唯一、有効になります。ここ

は、ここで細かい動作demo

+0

申し訳ありませんが、 – bhatt

+0

はい、 'n '桁の数字が必要ですが、フィールドは必要なパターンと一致するまで有効ではありません。これはAngularの美しさです。パターンに対して入力を検証できます。有効でない場合ng-modelに値を割り当てません。 –

+0

デベロッパービューでは問題ありませんが、ユーザービューでは有効ではありません。なぜなら、残念なことにユーザーは角の美しさを知らないからです – bhatt

関連する問題