Поле ввода не проверки при использовании angularjs

BLOCKQUOTE Поле ввода требует следующих проверок: 1) Длина поля ввода должны занять до значений длины 3 целых (знаков после запятой не допускается) 2) Высота поле ввода следует принять 3 целое число и десятичные знаки до 2-х мест Его работа прекрасна в первый раз, но после нажатия кнопки + такие же поля ввода открываются, но теперь: в новых боксах проверки не работают, даже если я использую те же классы для полей ввода, то есть недавно добавленные поля ввода принимают любое количество цифр и символов. так как решить это через угловой?Поле ввода не проверки при использовании angularjs

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 
 
    }); 
 
    $(".form-control").on("keyup", function (e) { 
 
      var $field = $(this), 
 
       val = this.value, 
 
       $thisIndex = parseInt($field.data("idx"), 10); // retrieve the index 
 
//  window.console && console.log($field.is(":invalid")); 
 
      // $field.is(":invalid") is for Safari, it must be the last to not error in IE8 
 
      if (this.validity && this.validity.badInput || isNaN(val) || $field.is(":invalid")) { 
 
       this.value = inputQuantity[$thisIndex]; 
 
       return; 
 
      } 
 
      if (val.length > Number($field.attr("maxlength"))) { 
 
       val = val.slice(0, 5); 
 
       $field.val(val); 
 
      } 
 
      inputQuantity[$thisIndex] = val; 
 
    }); 
 
}); 
 
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>Flooring Area {{$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> 
 
            <div class="form-group col-md-3 col-sm-3 col-xs-12"> 
 
             <label for="area">Area sq :</label> 
 
             <input type="number" class="form-control text-red bold" id="area" value="{{choice.l2 * choice.b2}}" readonly> 
 
            </div> 
 
            <button type="button" class="btn btn-default pull-right btn-red" aria-label="Left Align" ng-click="removeChoice()" id="minus_icon"> 
 
             <span class="glyphicon glyphicon-minus minus-btn" aria-hidden="true" ></span> 
 
            </button> 
 
           </div> 
 

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

 
</html>

Blockquote

источник

2016-04-21 bhatt

где кнопка '+'? –

Этот угловой? –

@KhalidHussain, из-за кнопки css + не отображается, в пользовательском интерфейсе после Flooring Area 1 есть один маленький ящик, после нажатия этого же поля ввода открывается, но в открытых полях валидация не работает – bhatt

В DIV, расположенный под контроллером,

<div ng-app="Calc" ng-controller="Calc_Ctrl">

рассмотрите использование ng-шаблона внутри div; таким образом ->

<div ng-pattern="regular-expression" data-ng-repeat="choice in choices" class="col-md-12 col-sm-12 col-xs-12 bottom-line no-gap">

Read about ng-pattern. Read about regular expressions.

источник

2016-04-21 05:42:13

Поле ввода не проверки при использовании angularjs

ответ

Смежные вопросы