1

I know that is posible with jquery but I dont know how to do that with angular js, please any sugestion?

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

2 Answers 2

5

You can also create a directive for this!

Check the code:

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");
    }
};
})

For its usage, here's an example:

<input type="text" ng-model="myModel" uppercase />
Sign up to request clarification or add additional context in comments.

1 Comment

Your solution is elegant, but sadly does not integrate well with the directive: ng-pattern
1

You could do it in HTML template or via JS using the angular uppercase filter.

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

If you need to change the value in-place, use toUpperCase when ever value is changed.

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


Above in preferred approaches. Here's yet another way to achieve same result using $watch but this is not recommended. See comments section.

<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);

Related Plunker here http://plnkr.co/edit/susiRn

3 Comments

I haz anonymous downvote w/o comment, on accepted (and only) answer. That's always nice!
(Extensive) usage of watchers 1) has a negative impact to performance in angular 2) make logical flow more complex. Therefore a directive is a better way to solve this,
True dat. I update my answer as not recommended approach.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.