Capitalize First Letter Filter - AngularJS

angular-filters.js

app.filter('capitalize', function() {
  return function(input, scope) {
    if (input!=null)
    input = input.toLowerCase();
    return input.substring(0,1).toUpperCase()+input.substring(1);
  }
});

I wanted to capitalize the first letter of each word (used in address picker service that was returning everything in uppercase) so implemented the solution from this SO question like so

(function() {
    'use strict';

    angular
        .module('myApp.filters')
        .filter('capitalize', capitalize);

    function capitalize() {
        return filter;

        function filter(input) {
            if (input !== null) {
                return input.replace(/\w\S*/g, function(txt) {
                    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                });
            }
        }
    }
 })();

nice, thanks!

app.filter('capitalize', function() {
return function(input, scope) {
if (input!=undefined) {
if (input!=null)
input = input.toLowerCase();
return input.substring(0,1).toUpperCase()+input.substring(1);
}
}
});

use:
{{student.name | capitalize}}

@martininf It is possible to do with css, you just need to set the starting css with lowercase, and then you need to use jquery (or plain old javascript) to change the text-transform to uppercase. However, if you are using angular, it may be easier to just use that. Otherwise, this option would be best for those not using angular.

I improved the filter so it can handle more than one word (necessary for proper nouns). Here it is:

  .filter('capitalize', function() {
    return function(input, scope) {
      if (input!=null) {
          var stringArr = input.split(" ");
          var result = "";
          var cap = stringArr.length;
          for(var x = 0; x < cap; x++) {
            stringArr[x].toLowerCase();
            if(x === cap - 1) {
              result += stringArr[x].substring(0,1).toUpperCase() + stringArr[x].substring(1);
            } else {
              result += stringArr[x].substring(0,1).toUpperCase() + stringArr[x].substring(1) + " ";
            }
          }
        return result;
      }
    }
  })

Nice filter 👍

Great! thanks!

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 😄

app.filter('capitalize', function() {
return function(input, scope) {
if (input!=null)
input = input.toLowerCase();
return input.substring(0,1).toUpperCase()+input.substring(1);
}
});
==>> this wont change JOHN SMITH" or "JoHn SMith" to "John Smith".
It changes to "John smith" instead .

Thank You!

Thanks! Very usefull!)))

@sampath 123 this may help you
`

<script>
    var app = angular.module('myApp', []);
    app.filter('myFilter', function () {
        return function (x) {
            var i,txt = "";
            for (i = 0; i < x.length; i++) {
                if (x[i] == " ") {
                    i++;
                    txt += " "+x[i].toUpperCase(); 
                }
                else {                        
                    txt += x[i];
                }                    
            }
            txt = txt.substring(0, 1).toUpperCase() + txt.substring(1);
            return txt;
        };
    });
    app.controller('namesCtrl', function ($scope) {
        $scope.names = [
            'Jani Wool',
            'Carl',
            'hello margareth',
            'Hege rooman rellex',
            'Joe',
            'Gustav',
            'Birgit',
            'Mary',
            'Kai'
        ];
    });
</script>`

What if I do have a string like "state of mind", and I just want "State of Mind", what could I do?

Might Help Someone. Angular 2 Pipe (aka filter in Angularjs)

@Pipe({name:` 'capitalize'})
export class CapitalizePipe implements PipeTransform {
    transform(value: string): string {
        if (value!=null)
            value = value.toLowerCase();
        return value.substring(0,1).toUpperCase()+value.substring(1);
    }
}

@reichert621 nice one!

Thanks bro!

@reichert621: good one ...

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

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

In css add,

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

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

👍

@paula Kreuger
Thanks for nice one and simple filter .

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?

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.

Okay i got thanks.

…

On Sun, Jul 26, 2020, 6:50 PM Simone Vittori ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ 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 <https://github.com/martininf>. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/b2af1958f3d67f46447e#gistcomment-3391890>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJ7RFDKZLGH7ZKKIRLUBIIDR5QUSVANCNFSM4HHCPIXA> .