テキストフィールドの最初の番号をブロックする

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

Btw：数字だけを渡すことができます:-)

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'; 
    } 
    } 
});