Javascript 使用AngularJS自动大写输入字段

我的输入字段中有一个许可证密钥指令，该指令根据服务器端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 />

更新

我刚刚注意到，当我使用

手表

时，我的文本在获得有效的许可证密钥（由LicenseApiService验证）之前不会大写，但当我以小写形式输入有效密钥时，文本会大写。代码如下：

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

---

我设法使用我创建的过滤器创建了一个小函数，该过滤器使用大写和连字号，请查看并告诉我它是否满足您的需要

代码：

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()"/>

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