Question

块引用输入框需要以下验证： 1）长度输入框最多需要3个整数长度值（不允许小数） 2）高度输入框应取3个整数，小数最多2个位它第一次工作正常，但点击+按钮后相同的输入字段打开但现在：在新框中，即使我使用相同的类输入框，验证也不起作用，即新添加的输入框正在取任何数字数字和字符。那么如何通过角度解决这个问题？

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>

块引用

Answer 1

在控制器下方的div中，

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

考虑在div中使用ng-pattern;因此 - ＆gt;

<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

使用angularjs时输入框未验证

1 个答案: