Question

我的输入字段上有一个指令，用于许可证密钥，可以根据服务器端API对其进行验证。这很好但我也希望我的许可证密钥自动连字并显示为大写。

即。输入abcd1234qwer5678的用户会将其显示为ABCD-1234-QWER-5678。（我首先尝试使自动大写工作，然后我尝试连字符）

我尝试了几件事，首先是控制器内的手表，如此

$scope.$watch('licenceKey', function (newValue, oldValue) {
    $scope.$apply(function () {
        $scope.licenceKey = newValue.toUpperCase();
    })
});

我还尝试使用我应用于输入的第二个指令

myApp.directive('capitalize', function() {
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
           if(inputValue == undefined) inputValue = '';
           var capitalized = inputValue.toUpperCase();
           if(capitalized !== inputValue) {
              modelCtrl.$setViewValue(capitalized);
              modelCtrl.$render();
            }         
            return capitalized;
         }
         modelCtrl.$parsers.push(capitalize);
         capitalize(scope[attrs.ngModel]);  // capitalize initial value
     }
   };
});

第一个似乎什么都不做，第二个似乎在短暂的延迟后取代现有的文本。我的HTML就像这样

<input type="text" name="licenceKey" ng-model="licenceKey" 
    ng-model-options="{ debounce : { 'default' : 150 } }" licence-key-validator />

达到我想要的最佳方式是什么？为什么我会遇到这些问题？

我注意到的是，如果我使用Batarang检查范围，licenceKey似乎保持为null，直到我提交表单。当我输入输入时，为什么不填充这个？

angular.module('licenceApp.controllers', [])
    .controller('licenceController', ['$scope', 'licenceAPIservice', '$filter', function ($scope, licenceAPIservice, $filter) {
        $scope.licenceKey = "";

        $scope.$watch('licenceKey', function (newValue, oldValue) {
            $scope.$apply(function () {
                $scope.licenceKey = newValue.toUpperCase();
            })
        });
        ...

更新

我刚刚注意到，当我使用watch时，我的文本不会大写，直到我获得有效的许可证密钥（由licenceAPIservice验证），但是当我输入小写的有效密钥时它会被大写。代码如下：

angular.module('licenceApp.directives', [])
    .directive('licenceKeyValidator', function ($http, $q, licenceAPIservice) {
        return {
            require: 'ngModel',
            link: function ($scope, element, attrs, ngModel) {
                ngModel.$asyncValidators.licenceKeyValidator = function (licenceKey) {
                    var deferred = $q.defer();

                    licenceAPIservice.validateKey(licenceKey).then(function (data) {
                        if (data.data) {
                            deferred.resolve();
                        }
                        else {
                            deferred.reject();
                        }
                    }, function () {
                        deferred.reject();
                    });

                    return deferred.promise;
                };
            }
        }
    });

Answer 1

我设法使用我创建的过滤器来创建一个小函数，该过滤器使用大写和连字符，看看并告诉我它是否符合您的需求。

http://plnkr.co/edit/i8MEUQjtUvlthp9WwaBq?p=preview

代码：

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

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

  $scope.myText = "";

  $scope.update = function(){ 
    $scope.myText = $filter('myFilter')($scope.myText); 
  };

}]); 

app.filter('myFilter', function(){
  return function(text){
    if(!text)
      return text;
    else{
      var toReturn = text;
      toReturn = toReturn.toUpperCase().replace('', '');
      if(toReturn.length > 4 && toReturn[4] !== "-") 
        toReturn = toReturn.substring(0, 4) + "-" + toReturn.substring(4);
      if(toReturn.length > 9 && toReturn[9] !== "-") 
        toReturn = toReturn.substring(0, 9) + "-" + toReturn.substring(9);
      if(toReturn.length > 14 && toReturn[14] !== "-") 
        toReturn = toReturn.substring(0, 14) + "-" + toReturn.substring(14); 
      return toReturn; 
    }
  }; 
});

HTML：

<input ng-model="myText" ng-change="update()"/>

使用AngularJS自动大写输入字段

1 个答案: