ngModel 中的字母数字值在 AngularJS 中输出为大写

Question

我有一个带有输入字段的表单。一个输入字段允许字母数字值。但如果值包含字母，则字母必须大写。我该如何实施这种方法？是否可以在输入字段中定义这个，当用户输入时，字母会自动显示为大写？

观点：

<div class="form-group-sm has-feedback">
  <label class="control-label" for="article-id">Article Nr.</label>
  <input type="text" 
         class="form-control" 
         name="Article" 
         id="article-id"
         ng-model="selected.article" 
         ng-pattern="/^[a-zA-Z]{2}[a-zA-Z\d]{9}[0-9]$/"
         ng-required="true"
         />
</div>
...
//the other inputs are the same definition

对我来说，用大写字母保存数据库中的值很重要。

Answer 1

只需创建一个简单的指令，此答案基于此处的答案: Angular.js: How to autocapitalize an input field?.

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" ng-model="name" capitalize>

Answer 2

第一个答案很好。但我已经用 CSS 代码解决了这个问题：

CSS:
#article-id {
    text-transform: uppercase;
}

ngModel 中的字母数字值在 AngularJS 中输出为大写

Alphanumeric value in ngModel outputs to uppercase in AngularJS

javascript

angularjs

uppercase

angular-ngmodel