Question

嗨，我是angularjs的新手，我们想要实现一个只允许六位数的输入文本框，输入六位数后，逗号分隔将添加并输入另外六位数字。你能帮我么。我们现在的示例代码是

**html** 

 <div ng-controller="MyCtrl">
<input type="text" ng-model="number" required="required" numbers- 
 only="numbers-only" />
</div>

Angular js控制器

   angular.module('myApp', []).directive('numbersOnly', function(){
  return {
    require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
      modelCtrl.$parsers.push(function (inputValue) {

       if (inputValue == undefined) return '' 
       var transformedInput = inputValue.replace(/[^0-9]/g, ''); 
       if (transformedInput!=inputValue) {
          modelCtrl.$setViewValue(transformedInput);
          modelCtrl.$render();
       }         

       return transformedInput;         
       });
    }
 };
  });

 function MyCtrl($scope) {
    $scope.number = ''
   }

我们发现的fiddler链接

http://jsfiddle.net/thomporter/DwKZh/

Answer 1

查看ui-mask，将模板设置为999999-999999，或者您也可以使用angular-input-mask

Answer 2

编辑angular指令并将按键事件绑定到textbox元素。在事件检查长度内。如果长度为6，请添加逗号并将新值重新绑定到文本框中。

Answer 3

您要做的就是在指令link中附加按键事件并检查输入长度并采取相应措施。我没有修改你的代码，而是编写了自己的代码。这是DEMO

以下是HTML代码：

<div ng-app="myApp" ng-controller="MyCtrl">
    <input type="text" ng-model="number" number-only required="required" />
</div>

以下是修改后的指令代码：

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function($scope) {

}])

app.directive('numberOnly', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {

      // Attach key press event

      elem.bind('keypress', function(e) {

        // Check if its a number 

        if (e.which >= 48 && e.which <= 57) {



            var ar = scope.number.split(',');

            if (ar[ar.length - 1].length >= 6) {
              scope.number = scope.number + ',';
            }

            scope.$apply();


        }
        else {
          e.preventDefault();
        }
      });

    }
  }
});

输入仅允许6位数，并在逗号分隔后允许另外6位角js

3 个答案: