javascript - 使用 AngularJS 输入字段自动大写

Question

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

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

我尝试了一些方法，首先是 Controller 内的 watch ，如下所示

$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 似乎保持为空，直到我提交表单。为什么当我在输入中键入时没有填充该内容？

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 时，我的文本不会大写，直到我获得有效的许可证 key (由 licenceAPIservice 验证)，但当我输入有效 key 时，它会大写小写。代码如下:

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