AngularJS - Format Text Return From JSON To Title Case

Question

I have a service that retrieves data from a JSON file.

Some of the data within the data is all in uppercase, for example:

$scope.FootballClubs = [{
    CompanyName: [MANCHESTER UNITED, LIVERPOOL FOOTBALL CLUB, CHELSEA, WIGAN UNTIED, LEICESTER CITY]
}];

And in my HTML, i am simply throwing about the above:

<div ng-repeat="name in FootballClubs">
    {{ name.CompanyName }}
</div>

Which throws out:

MANCHESTER UNITED
LIVERPOOL FOOTBALL CLUB
CHELSEA
WIGAN UNTIED
LEICESTER CITY

What i am trying to display is:

Manchester United
Liverpool Football Club
Chelsea
Wigan United
Leicester City

Solution 1

A filter is an ideal solution for this purpose

<div ng-repeat="name in FootballClubs">
    {{ name.CompanyName | titleCase }}
</div>

So the filter itself would be

angular.module('myFootballModule', [])
  .filter('titleCase', function() {
    return function(input) {
      input = input || '';
      return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
    };
  })

Solution 2

Let me offer a non-directive way which is probably easier to implement but less powerful and dependent on the solution being UI only. First, change them to lowercase {{name.CompanyName.toLowerCase()}}

I think the easiest way is to just have CSS format it (either via a style tag, class, etc).

<div ng-repeat="name in FootballClubs" style="text-transform:capitalize;">
 {{ name.CompanyName.toLowerCase() }}
</div>

Here is a demo: http://plnkr.co/edit/S4xtIRApMjKe0yQGREq5?p=preview

Comments

[lucuma]

Right, so first make them all lowercase and then have css capitalize them. I've updated the answer.

[lucuma]

I updated the plunker link although the code is in my answer.

[user2847643]

This should be the accepted answer. It's waaay nicer than using a filter.

[Oam Psy]

@user2847643 - if you can justify why it is 'waaay' nicer than a filter then i will.

[lucuma]

@OamPsy, nicer is relative, I'd say go with the answer that works best for you. I did my answer as a css solution b/c it is much simpler and doesn't require a filter and somewhat complex regex but that's just me.

[user2847643]

@Oam Psy, IMHO, it is the smart way of solving the problem. The filter is ok, it works. But once you realize you can do it with pure CSS then why bother with filters? It's faster - always will be no matter how you optimize the filter. It's more concise - practically a one liner. It doesn't use regular expressions. It sticks to the best practice of separating logic and view. The filter is good, deserves a couple up votes, valid alternative. But this is several levels higher in terms of webdev zen. This is just right.

[James Cazzetta]

I disagree that this should be the accepted answer. Just try copying the content and pasting it somewhere. It wont be camel case. It just styles it that way. IMHO the focus lies on what the content really is - not just the visual part. It depends on what you really want to provide.

[lucuma]

@JamesCazzetta based on the question it is visual style not a data entry type issue but all the same, the person that asks the question decides which is best for them.

[Jordi Nebot]

titleCase is not a default filter in ng component, if you don't implement it, it won't work. Please, see the accepted answer for this question.

[Vasanth]

As @JordiNebot mentioned, titleCase is not a default filter of Angular. You will get error during the execution if you use it.