web-dev-qa-db-fra.com

AngularJS - Formater le retour de texte de JSON vers la casse du titre

J'ai un service qui récupère les données d'un fichier JSON.

Certaines des données contenues dans les données sont toutes en majuscules, par exemple:

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

Et dans mon HTML, je parle simplement de ce qui précède:

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

Ce qui jette:

MANCHESTER UNITED
LIVERPOOL FOOTBALL CLUB
CHELSEA
WIGAN UNTIED
LEICESTER CITY

Ce que j'essaie d'afficher, c'est:

Manchester United
Liverpool Football Club
Chelsea
Wigan United
Leicester City
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
34
Oam Psy

A filtre est une solution idéale à cet effet

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

Ainsi, le filtre lui-même serait

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();});
    };
  })
68
dubadub

Permettez-moi de proposer une méthode non directive qui est probablement plus facile à implémenter mais moins puissante et dépend de la solution étant uniquement l'interface utilisateur. Tout d'abord, changez-les en minuscules {{name.CompanyName.toLowerCase()}}

Je pense que le moyen le plus simple est de simplement le mettre en forme CSS (soit via une balise de style, une classe, etc.).

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

Voici une démo: http://plnkr.co/edit/S4xtIRApMjKe0yQGREq5?p=preview

26
lucuma