Skip to content

Instantly share code, notes, and snippets.

@paulakreuger
Last active October 18, 2023 19:34
Show Gist options
  • Save paulakreuger/b2af1958f3d67f46447e to your computer and use it in GitHub Desktop.
Save paulakreuger/b2af1958f3d67f46447e to your computer and use it in GitHub Desktop.
Capitalize First Letter Filter - AngularJS
app.filter('capitalize', function() {
return function(input, scope) {
if (input!=null)
input = input.toLowerCase();
return input.substring(0,1).toUpperCase()+input.substring(1);
}
});
@umairhm
Copy link

umairhm commented Oct 28, 2016

@reichert621: good one ...

@deepshikh
Copy link

deepshikh commented Dec 14, 2016

i have made custom service my html code is:

First word only: {{msg | capitalize}}


All words: {{msg | capitalize:true}}

this is my custom servies js code:

angular.module('MetronicApp', []).
filter('capitalize', function () {
return function (input, all)
{
var reg = (all) ? /([^\W_]+[^\s-]*) /g : /([^\W_]+[^\s-])/;
return (!!input) ? input.replace(reg, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }) : '';
}
});

function seivicesController($scope) {
$scope.msg = 'hello, world.';
}

while i m trying to use in my other controller
code is
$scope.msg = seivicesController.capitalize(input);
stil not getting ans

@tarunwittyfeed
Copy link

return countries.filter(function(country) {
return country.name.toLowerCase().indexOf($query) != -1;

@nagasaikrishna
Copy link

In css add,

.capitalize::first-letter {
text-transform: uppercase;
}
.capitalize1 {
text-transform: lowercase;
}

and use,
class ="capitalize1 capitalize"
in HTML files

@somdey
Copy link

somdey commented Jun 30, 2017

👍

@anilmadala
Copy link

@paula Kreuger
Thanks for nice one and simple filter .

@HarshJains
Copy link

adding on to what @simonewebdesign said above, you could also just use angular's built-in lowercase filter and do something like

// CSS
.capitalized { text-transform: capitalize; }

// HTML
<div class="capitalized">{{ data.string | lowercase }}</div>

...to avoid the issues @martininf brought up 😄

Can you explain me how it works?

@simonewebdesign
Copy link

Can you explain me how it works?

The idea is to convert the string to lower case, then let CSS capitalize each first letter. It can be necessary if you need to prevent the edge cases mentioned by @martininf.

@HarshJains
Copy link

HarshJains commented Jul 26, 2020 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment