How to select all inputs elements using angularJs

Question

i need to convert all the string entered to uppercase using angularJs, i tried with jQuery and it works perfectly but i do not know how to manipulate the elements with angularJs.

pd.the project is made in a sigle page so i have lots of controllers and i want to use this function over all the controllers. the code below was written in the " ng-run() " function, it works in all the project, no matter the controller is in use (it works while the page is reloaded) .

    $("input").keyup(function() {
      this.value = this.value.toUpperCase();
    });

Answer 1

If you want capital letters just for the UI and not for anything internal in your JS logic, you can use an uppercase Filter on your text.

Depending on how you're doing your inputs, you could also do something such as tack a function onto ng-change for the input. See docs for ng-change here. This also changes the input value to capital letters.

<input ng-model="txt" ng-change="txt = txt.toUpperCase()"/>
<h1>{{txt}}</h1>

If you're doing something more advanced than simply capitalizing the text, you can instead use a function in ng-change instead of an inline command. (I'd recommend this way anyways, since it is easier to debug than inline JavaScript.)

<input ng-model="txt" ng-change="makeCapital()"/>

Where makeCapital() looks like this:

$scope.makeCapital = function(){
    txt = txt.toUpperCase()
}

If you want to make a copy of the text that is capital, but do not want to edit the original text that is being two-way bound, then you can use a function that copies the bound variable into a second variable, and then change the capitalization on that variable.

<input ng-model="txt" ng-change="makeCapitalCopy()" />

Where makeCapitalCopy() looks like this:

$scope.makeCapitalCopy = function() {
      $scope.capitalCopy = $scope.txt.toUpperCase();
      // This capitalCopy variable doesn't need to be on the $scope. 
      // If you're not going to display the value back on the view and just want to manipulate it internally, just declare it locally.
}

However, for the latter option, depending on what your goal is with the data, if you want to reflect the input back onto the view, I think this is overkill and defeats the point of two-way binding.

Here is a Plunker showing all three of these.