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

对我来说，使用大写字母将值保存在DB中非常重要。

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 like -

<input type="text" ng-model="name" capitalize>

Answer 2

第一个答案正常。但我用这个CSS代码解决了这个问题：

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

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

2 个答案: