Capitaliser la première lettre de chaîne dans AngularJs

Utilisez ce filtre en majuscule

 var app = angular.module('app', []); app.controller('Ctrl', function ($scope) { $scope.msg = 'hello, world.'; }); app.filter('capitalize', function() { return function(input) { return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : ''; } }); 

 <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> 

Je dirais ne pas utiliser angular / js car vous pouvez simplement utiliser css à la place:

Dans votre css, ajoutez la classe:

 .capitalize { text-transform: capitalize; } 

Ensuite, simplement enveloppez l'expression (par ex) dans votre html:

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

Il n'était pas nécessaire;)

Si vous utilisez Bootstrap , vous pouvez simplement ajouter la classe help text-capitalize :

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

Un moyen plus agréable

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

Si vous êtes après la performance, essayez d'éviter d'utiliser les filtres AngularJS car ils sont appliqués deux fois par chaque expression pour vérifier leur stabilité.

Une meilleure façon serait d'utiliser CSS ::first-letter pseudo-élément de ::first-letter avec text-transform: uppercase; . Cela ne peut pas être utilisé sur des éléments en ligne tels que span , cependant, de sorte que la prochaine meilleure chose serait d'utiliser text-transform: capitalize; Sur tout le bloc, qui capitalise chaque mot.

Exemple:

 var app = angular.module('app', []); app.controller('Ctrl', function ($scope) { $scope.msg = 'hello, world.'; }); 

 .capitalize { display: inline-block; } .capitalize::first-letter { text-transform: uppercase; } .capitalize2 { text-transform: capitalize; } 

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

J'aime la réponse de @TrampGuy

CSS est toujours (bien, pas toujours) un meilleur choix, donc: text-transform: capitalize; Est certainement le chemin à parcourir.

Mais que faire si votre contenu est en majuscule pour commencer? Si vous essayez text-transform: capitalize; Sur un contenu comme "FOO BAR", vous obtiendrez toujours "FOO BAR" dans votre écran. Pour contourner cette question, vous pouvez mettre la text-transform: capitalize; du text-transform: capitalize; Dans votre css, mais aussi en minuscule votre chaîne, alors:

 <ul> <li class="capitalize">{{ foo.awesome_property | lowercase }}</li> </ul> 

Où nous utilisons la classe de capitalisation @ TrampGuy:

 .capitalize { text-transform: capitalize; } 

Donc, en prétendant que foo.awsome_property imprimerait normalement "FOO BAR", il va maintenant imprimer la "Foo Bar" souhaitée.

Si vous voulez mettre en majuscule chaque mot de chaîne (en cours -> En cours), vous pouvez utiliser un tableau comme celui-ci.

 .filter('capitalize', function() { return function(input) { return (!!input) ? input.split(' ').map(function(wrd){return wrd.charAt(0).toUpperCase() + wrd.substr(1).toLowerCase();}).join(' ') : ''; } }); 

Pour l'AngularJS de meanjs.org, je place les filtres personnalisés dans modules/core/client/app/init.js

J'avais besoin d'un filtre personnalisé pour capitaliser chaque mot dans une phrase, voici comment je le fais:

 angular.module(ApplicationConfiguration.applicationModuleName).filter('capitalize', function() { return function(str) { return str.split(" ").map(function(input){return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : ''}).join(" "); } }); 

Le crédit de la carte fonctionne à @Naveen raj

Si vous ne souhaitez pas créer de filtre personnalisé, vous pouvez l'utiliser directement

 {{ foo.awesome_property.substring(0,1) | uppercase}}{{foo.awesome_property.substring(1)}} 

Juste pour ajouter ma propre prise sur cette question, j'utiliserais moi-même une directive personnalisée;

 app.directive('capitalization', function () { return { require: 'ngModel', link: function (scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function (inputValue) { var transformedInput = (!!inputValue) ? inputValue.charAt(0).toUpperCase() + inputValue.substr(1).toLowerCase() : ''; if (transformedInput != inputValue) { modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); } return transformedInput; }); } }; 

Une fois déclaré, vous pouvez placer dans votre Html comme ci-dessous;

 <input ng-model="surname" ng-trim="false" capitalization> 

Au lieu de cela, si vous souhaitez capitaliser chaque mot d'une phrase, vous pouvez utiliser ce code

 app.filter('capitalize', function() { return function(input, scope) { if (input!=null) input = input.toLowerCase().split(' '); for (var i = 0; i < input.length; i++) { // You do not need to check if i is larger than input length, as your for does that for you // Assign it back to the array input[i] = input[i].charAt(0).toUpperCase() + input[i].substring(1); } // Directly return the joined string return input.join(' '); } }); 

Et ajoutez simplement le filtre "capitaliser" à votre entrée de chaîne, pour ex – {{nom | capitaliser}}

Vous pouvez ajouter le temps d'exécution de fonctionnalité de capitalisation comme suit:

 <td>{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}</td> 

Dans Angular 4 ou CLI, vous pouvez créer un PIPE comme ceci:

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'capitalize' }) /** * Place the first letter of each word in capital letters and the other in lower case. Ex: The LORO speaks = The Loro Speaks */ export class CapitalizePipe implements PipeTransform { transform(value: any): any { value = value.replace(' ', ' '); if (value) { let w = ''; if (value.split(' ').length > 0) { value.split(' ').forEach(word => { w += word.charAt(0).toUpperCase() + word.toString().substr(1, word.length).toLowerCase() + ' ' }); } else { w = value.charAt(0).toUpperCase() + value.toString().substr(1, value.length).toLowerCase(); } return w; } return value; } } 

{{ uppercase_expression | capitaliseFirst}} {{ uppercase_expression | capitaliseFirst}} devrait fonctionner