代码之家 › 专栏 › 技术社区 › Thirupathi cst

angularjs文本框必须具有最大长度数字

angularjs

Thirupathi cst · 技术社区 · 7 年前

我有30个文本框第一个文本框必须有9个数字和第二个文本框必须有3位数字,我有这样的代码后,第一个文本框达到最大长度它移动到下一个文本框。

我怎样才能做到这一点?

function numOnly() {
  var directive = {
      restrict: 'A',
      scope: {
          ngModel: '=ngModel'
      },
      link: link
  };
  return directive;

  function link(scope, element, attrs) {
    scope.$watch('ngModel', function (newVal, oldVal) {
        var arr = String(newVal).split('');
        if (arr.length === 0) return;
        if (arr.length === 1 && (arr[0] === '-' || arr[0] === '.')) return;
        if (isNaN(newVal)) {
            //scope.ngModel = oldVal;
            scope.ngModel = "";
        }
    });
}

<tr ng-repeat="cl in codelist" ng-if="$odd" >
    <td>{{$index+1}}</td>
    <td>
        <label ng-model="codelist[$index].CodeNumber">{{codelist[$index].CodeNumber}}</label>
    </td>
    <td ng-class="{ 'has-error' : codeForm.clHtnoA{{$index}}.$invalid && (codeForm.clHtnoA{{$index}}.$dirty || submitted) }">
        <input type="text" name="clHtnoA{{$index}}" ng-model="codelist[$index].HtnoA" num-only maxlength="9" ng-readonly="{{codelist[$index].Status}}" required class="form-control" />
        <span ng-show="codeForm.clHtnoA{{$index}}.$error.required && (codeForm.clHtnoA{{$index}}.$invalid.$dirty || submitted)" class="help-block">HallTicket is required.</span>
    </td>
    <td ng-class="{ 'has-error' : codeForm.clHtnoB{{$index}}.$invalid && (codeForm.clHtnoB{{$index}}.$dirty || submitted) }">
        <input type="text" name="clHtnoB{{$index}}" ng-model="codelist[$index].HtnoB" num-only maxlength="3" ng-change="findNameAB($index)" ng-readonly="{{codelist[$index].Status}}" required class="form-control" />
        <span ng-show="codeForm.clHtnoB{{$index}}.$error.required && (codeForm.clHtnoB{{$index}}.$invalid.$dirty || submitted)" class="help-block">3 no's only.</span>
    </td>
    <td>
        <span ng-model="codelist[$index].Sname">{{codelist[$index].Sname}}</span>
    </td>
</tr>

My form looks like this

2 回复 | 直到 6 年前

Ali Sajid 7 年前

指令是你的解决方案:

app.directive("range", [function() {
        return {
            restrict: "A",
            link: function(scope, elem, attrs) {
                var range = parseInt(attrs.limitTo);
                angular.element(elem).on("keypress", function(e) {
                    if (this.value.length == range) e.preventDefault();
                });
            }
        }
    }]);


<input type="text" ng-model="mybox1" range="9"/>

Shenoy D'Souza 7 年前

利用最大长度

<div ng-app="myApp" ng-controller="myCtrl">
<form>
        <input type="text" id="part1" ng-model="myObject.part1"  ng-maxlength = "9"/>
        <input type="text" id="part2" ng-model="myObject.part2"  ng-maxlength = "3" />
    </form>
</div>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前