How To Capitalize And Uppercase In Angularjs?

January 19, 2024 Post a Comment

I want to capitalize/uppercase some fields in a HTML form. HTML

Solution 1:

You cannot do that without actually change the field values using javascript in your controller/service once you submit the form. Css only changes the appearance/UI on the page but not the actual value.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

/* Put your css in here */.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

<!DOCTYPE html><htmlng-app="plunker"><head><metacharset="utf-8" /><title>AngularJS Plunker</title><script>document.write('<base href="' + document.location + '" />');</script><linkrel="stylesheet"href="style.css" /><scriptsrc="http://code.jquery.com/jquery-2.1.4.min.js"></script><scriptdata-require="angular.js@1.4.x"src="https://code.angularjs.org/1.4.0/angular.js"data-semver="1.4.0"></script><scriptsrc="app.js"></script></head><bodyng-controller="MainCtrl"><formrole="form"ng-submit="submit()"><inputtype="text"class="capitalize"id="firstname"ng-model="first"/><inputtype="text"class="uppercase"id="lastname"ng-model="last"/><buttontype="submit"></button><
</form><buttononclick="$('#firstname').removeClass('capitalize')">Remove Capitalize</button><buttononclick="$('#lastname').removeClass('uppercase')">Remove Uppercase</button></body></html>

Solution 2:

For the html this is because css only styles it so something like text-transform: uppercase; will only be visual.

To have it registered as uppercase you need to format it with a serverside as php and you could send your form to then get the data with POST AND use something like

$_POST = array_map("strtoupper", $_POST);

Solution 3:

You must ensure that the model have always an uppercased string. In your code you are not changing the model value, instead, you are formatting the value of the input to be uppercased.

You could use a directive to modify the value of the input before assigning it to the model. To do this kind of tasks you can register functions in the $parsers property of ngModel. You may use something like this:

angular.module("myModule")
  .directive("toUppercase", toUppercase)

functiontoUppercase(){
  functionparser(value){
    return value ? value.toUpperCase() : value;
  }

  return {
    require: 'ngModel',
    link: function(scope, elm, attr, ngModel){
      ngModel.$parsers.push(parser);
    }
  }
}

Using this directive, you can target your css to the directive attribute:

[to-uppercase]: text-transform: uppercase;

You can see a working plunkr here: http://plnkr.co/edit/A0gaPkAnPXWq8Od6RI9f?p=preview

Baca Juga

Solution 4:

Here is a solution. Add to your controller those 2 new functions:

function upperCase(str) {
    returnstr.charAt(0).toUpperCase() + str.slice(1);
}

function capitalize(str) {
    returnstr.toUpperCase();    
}

In $scope.submit(), You can transform the firstname/lastname as following:

$scope.submit = function() {
    ...
    $scope.firstname = upperCase($scope.firstname);    
    $scope.lastname = capitalize($scope.lastname);
}

Solution 5:

You can create a directive text-transforms:

app.directive('textTransforms',['$parse',function($parse){
  return {
    restrict:'A',
    require:'^ngModel',
    scope:{
      value:'=ngModel',
      caseTitle:'@textTransforms'
    },
    link:functionpostLink(scope, element, attrs){
      scope.$watch('value',function(modelValue,viewValue){
        if(modelValue){
          var newValue;
          switch(scope.caseTitle){
            case'uppercase':
              newValue = modelValue.toUpperCase();
              break;
            case'lowercase':
              newValue = modelValue.toLowerCase();
              break;
            case'capitalize':
              newValue = modelValue.charAt(0).toUpperCase() + modelValue.slice(1);
              break;
            default:
              newValue = modelValue;
          }
          $parse('value').assign(scope,newValue);
        }
      });
    }
  };
}]);

You can use above directive as follows:

<inputtype="text" text-transforms="capitalize" ng-model="first"/>
<inputtype="text" text-transforms="uppercase" ng-model="last"/>

I have also created a plunk: https://plnkr.co/edit/AoW8MuoCJWnbRtg25LJE?p=preview

Html5 Dictionary