如何在使用angular js输入输入字段时将文本转换为大写

Question

我知道使用 jquery 可以做到这一点，但我不知道如何使用 angular js 来做到这一点，请问有什么建议吗？

       function mayuscula(campo){
            $(campo).keyup(function() {
                           $(this).val($(this).val().toUpperCase());
            });
       }

Answer 1

你也可以为此创建一个指令！

检查代码：

directive('uppercase', function() {
return {
    restrict: "A"
    require: "?ngModel",
    link: function(scope, element, attrs, ngModel) {

        //This part of the code manipulates the model
        ngModel.$parsers.push(function(input) {
            return input ? input.toUpperCase() : "";
        });

        //This part of the code manipulates the viewvalue of the element
        element.css("text-transform","uppercase");
    }
};
})

关于它的用法，这里有一个例子：

<input type="text" ng-model="myModel" uppercase />

Answer 2

您可以在 HTML 模板中或通过 JS 使用 angular uppercase 过滤器来实现。

<div>
  <label>Input 1</label>
  <input type="text" ng-model="first">{{ first | uppercase }}
</div>

如果您需要就地更改值，请在更改值时使用toUpperCase。

<div>
  <label>Input 1</label>
  <input type="text" ng-model="first" ng-change="text = text.toUpperCase()">
</div>

---

以上是首选方法。这是使用$watch 实现相同结果的另一种方法，但不建议这样做。参见 cmets 部分。

<div>
  <label>Input 2</label>
  <input type="text" ng-model="second">
</div> 

var unwatch = $scope.$watch('second', function(val) {
    $scope.second = $filter('uppercase')(val);
}, true);

$scope.$on('$destroy', unwatch);

相关Plunker在这里http://plnkr.co/edit/susiRn