Capitalize the first letter of string in AngularJs

Question

I want capitalize first character of string in angularjs

As i used {{ uppercase_expression | uppercase}} it convert whole string to upper case.

Solution 1

use this capitalize filter

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

app.controller('Ctrl', function ($scope) {
   $scope.msg = 'hello, world.';
});

app.filter('capitalize', function() {
    return function(input) {
      return (angular.isString(input) && input.length > 0) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : input;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="Ctrl">
        <p><b>My Text:</b> {{msg | capitalize}}</p>
    </div>
</div>

Solution 2

I'd say don't use angular/js as you can simply use css instead:

In your css, add the class:

.capitalize {
   text-transform: capitalize;
}

Then, simply wrap the expression (for ex) in your html:

<span class="capitalize">{{ uppercase_expression }}</span>

No js needed ;)

Solution 3

If you use Bootstrap, you can simply add the text-capitalize helper class:

<p class="text-capitalize">CapiTaliZed text.</p>

EDIT: just in case the link dies again:

Text Transform

Transform text in components with text capitalization classes.

lowercased text.
UPPERCASED TEXT.
CapiTaliZed Text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

Solution 4

If you are using Angular 4+ then you can just use titlecase

{{toUppercase | titlecase}}

don't have to write any pipes.

Solution 5

a nicer way

app.filter('capitalize', function() {
  return function(token) {
      return token.charAt(0).toUpperCase() + token.slice(1);
   }
});

View more solutions

Comments

[Jabba]

You get an error if you want to capitalize a number accidentally. The body of the function should be this: return (angular.isString(s) && s.length > 0) ? s[0].toUpperCase() + s.substr(1).toLowerCase() : s; . If it's not a string then return it unchanged.

[jakub.g]

This transform will capitalize First Letter Of Each Word so is only applicable to one-word strings

[jakub.g]

Unfortunately ::first-letter doesn't work on display: inline or display: flex, only on display:block or inline-block elements

[Philzen]

@jakub.g If your just want to capitalize the first word (well, letter), simply expland the css selector with the :first-letter pseudo-element selector. Anything else left uncovered? :)

[Romain Vincent]

@Philzen Yes ! How would you do it with html only ? ;-)

[Skyware]

Here is written the custom capitalization filter codepen.io/WinterJoey/pen/sfFaK

[Philzen]

@RomainVincent What do you mean by "HTML only"? Maybe my answer below helps (just click "Run code snippet" to see it in action). HTML content is static, you will at least need to throw in some CSS or JS to modify its styling, respectively DOM content.

[Romain Vincent]

I'm sorry, that was a bad attempt at making a joke.

[Nasik Shafeek]

Quick and easy way to achieve the goal, also this capitalises first letter of every word in the string, which is cool.

[cameck]

behind the scenes this is just using text-transform: capitalize;

[peacetype]

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

[Ivan Kaloyanov]

This does not provide any value to the answer above

[Alex Peters]

This is an incorrect answer—the question asks to capitalise the first letter of the string, not the first letter of every word.

[Alex Peters]

This is an incorrect answer—the question asks to capitalise the first letter of the string, not the first letter of every word.

[Alex Peters]

This is an incorrect answer—the question asks to capitalise the first letter of the string, not the first letter of every word.

[Lea Reimann]

This is generally a good idea, but if I want to process the capitalized string any further with Angular, JavaScript/Angular would still treat it as a non-capitalized string.