Joey Zhang
Joey Zhang

Reputation: 363

How to use UpperCase filter in angular?

Is there a way I can do this with Angular Filter? For some reasons I'm not allowed to do it by Javascript ways, and creating additional files is not allowed as well

BTW, the purpose of the codes is to compare the users inputs whatever it is uppercase or lowercase, not just display the varName

<span data-ng-show="varName.toUpperCase() == 'YOURNAME'">
    Aswsome name !</span>

<span data-ng-hide="varName.toUpperCase() == 'YOURNAME'">
    {{varName}} is not my name.</span>

I have tried something like this but failed

<span data-ng-show="varName|uppercase == 'YOURNAME'">
    Aswsome name !</span>

Upvotes: 4

Views: 3954

Answers (4)

potatopeelings
potatopeelings

Reputation: 41065

Just put parentheses around the first 2 operands

<span ng-show="(varName | uppercase) == 'YOURNAME'">
    Aswsome name !</span>
</div>

Upvotes: 1

Hadi
Hadi

Reputation: 17289

try like this.

var editer = angular.module('editer', []);
function myCtrl($scope) {
$scope.varName = "yourname";
  
  $scope.toUpperCase = function(){
    return $scope.varName.toUpperCase();
  }
  
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="editer" ng-controller="myCtrl" class="container">
   
   <span data-ng-show="toUpperCase() == 'YOURNAME'">
    Aswsome name !</span>

<span data-ng-hide="toUpperCase() == 'YOURNAME'">
    {{varName}} is not my name.</span>

</div>

Upvotes: 1

Glory Raj
Glory Raj

Reputation: 17701

you have to use like this ....

   {{ uppercase_expression | uppercase}}

Example :

   <div ng-app>

    <p>
        <label>Enter your name (in lower case)</label>
        <input type="text" ng-model="yourname" />
    </p>

    <p> {{ yourname | uppercase }} </p>
</div>

Upvotes: 2

Ali Mamedov
Ali Mamedov

Reputation: 5256

You can convert strings to uppercase with this filter

In HTML Template Binding:

{{ varName | uppercase}}

Upvotes: 1

Related Questions