阻止文本字段中的第一個數字

Question

我有一個綁定到包含5位數字的變量的文本輸入。我怎樣才能阻止第一個數字，所以只有其他4個可編輯？

目前我有這樣的：ng-model="my_var" ng-pattern="/^\d{5}$/"

請注意，該值是雙向綁定，這意味着我展示它，用戶可以編輯/保存。

Answer 1

這裏是一個可行的解決方案（需要可能調整它一點點你的特殊需要）：

app.directive("filterInput", function() { 

    return { 
     require: 'ngModel', // controller to ng-model needed 
     restrict: 'A', 

     link: function (scope, element, attrs, modelCtrl) { 

      var unchanged = attrs.filterInput; 
      var regex = /^\d{0,5}$/; // the RegExp (in more generic solution could be passed from outside) 

      modelCtrl.$parsers.push(function (inputValue) { // adding new $parser 

       if(inputValue[0] != unchanged){ // if the first digit is different from what it should be set value as the first digit 
        modelCtrl.$setViewValue(unchanged); 
        modelCtrl.$render(); 
        return unchanged; 
       } 

       if(inputValue.length > 5){ // trim the input if it is longer than five -- it is not generic at all 
        var rv = inputValue.substring(0,5); 

        modelCtrl.$setViewValue(rv); 
        modelCtrl.$render(); 

        return rv; 
       } 



       var transformedInput = regex.exec(inputValue); 

       if (transformedInput != null) { // check if pattern exists 
        transformedInput = transformedInput[0]; 
       } 
       else { 
        transformedInput = unchanged; // if not set the value to the not changeable part 
       } 

       if (transformedInput != inputValue) { // re-render if value changed 
        modelCtrl.$setViewValue(transformedInput); 
        modelCtrl.$render(); 
       } 
       return transformedInput; 
      }); 
     } 
    } 
}); 

以及如何使用它：

<p>var: {{my_var}}</p> 
<input type="text" ng-model="my_var" filter-input="1"/> 

PLNKR

順便說一句：它將允許只傳遞數字:-)

Answer 2

您可以使用與ngModel配合使用的自定義指令。

它可以使用解析器/格式化程序來修改讀取/打印的值。

瞭解更多關於在這裏：​​http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController（$格式化和$解析器）

Answer 3

也許不是最好的解決辦法，但它的工作原理：

HTML

<input ng-model="my_var" maxlength="5"> 

控制器

$scope.my_var = '1'; 
$scope.$watch('my_var', function(){ 
    if($scope.my_var.length != 1){ 
    if($scope.my_var.length == 0){ 
     $scope.my_var = '1'; 
    } 
    } 
});