Question

我的申请是Angular 1.3.10

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

到期输入的格式为MM / YY，一旦用户输入第三个数字，就会自动添加'/'。这是一个快速修复，但我需要将其移动到$ scope。我给了它很好的大学尝试，但我被封锁了，所以我希望那些比我聪明的人可以伸出援助之手。

我需要转移到Angular $ scope的当前jQuery代码：

$(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

Answer 2

使用指令是个不错的选择

<强>标记

<input ng-model="expiration" id="cc-exp" ng-pattern="/^\d{2}\/\d{2}$/"  name="expiration" 
my-dir type="tel" class="long cc-exp" minlength="5" maxlength="5" required>

<强>指令

app.directive('myDir', function() {
    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.on('keypress', function(e) {
                var val = ngModel.$viewValue;
                if (val.length == 2) {
                    scope.$apply(function() {
                        ngModel.$setViewValue(val + "/");
                    });
                }
            });
        }
    }
})

自动将格式添加到输入字段作为用户类型

2 个答案: