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

时间:2014-08-08 21:48:40

标签: angularjs-directive

我知道jquery可以实现,但我不知道如何使用角度js,请提出任何建议吗?

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

2 个答案:

答案 0 :(得分:3)

您也可以为此创建指令!

检查代码:

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

答案 1 :(得分:1)

您可以使用角度uppercase过滤器在HTML模板或JS中执行此操作。

<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获得相同结果的另一种方法,但不建议这样做。请参阅评论部分。

<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