javascript - 当用户键入时自动将格式添加到输入字段

Question

我的应用程序是 Angular 1.3.10

我目前正在使用 jQuery 函数向到期输入字段添加反斜杠，请参见下文。

到期输入的格式为 MM/YY，一旦用户键入第三个数字，就会自动添加“/”。这是一个快速修复，但我需要将其移至 $scope 中。我已经在大学里进行了很好的尝试，但被阻止了，所以我希望那些比我聪明得多的人可以伸出援手。

我需要将当前的 jQuery 代码移至 Angular $scope:

$(document).ready(function () {
    $("#cc-exp").keypress(function () {
        if ($(this).val().length == 2) {
            $(this).val($(this).val() + "/");
        }
    });
});

过期 html 输入字段:

<md-input-container>
    <label>Expiration MM/YY</label>
    <input ng-model="expiration" id="cc-exp" ng-pattern="/^\d{2}\/\d{2}$/"  name="expiration" type="tel" class="long cc-exp" minlength="5" maxlength="5" required>
    <div ng-messages="payment.expiration.$error" ng-if="payment.$submitted" class="validation-error-display">
       <div ng-message="required">Please enter an expiration date.</div>
       <div ng-message="pattern">Must contain numbers only.</div>
       <div ng-message="minlength">Must be MM/YY format.</div>
       <div ng-message="maxlength">Must be MM/YY format.</div>
    </div>
</md-input-container>

Answer 1

使用$scope.$watch怎么样，每次过期时间改变时都会调用这个函数:

$scope.$watch('expiration',function(newValue, oldValue){
      if(newValue.length == 2) $scope.expiration = $scope.expiration +'/';
});

https://docs.angularjs.org/api/ng/type/$rootScope.Scope