Mettre en majuscule la première lettre de la chaîne dans AngularJs

Je veux mettre en majuscule le premier caractère de la chaîne dans angularjs

Comme je l'ai utilisé {{ uppercase_expression | uppercase}}, convertissez toute la chaîne en majuscules.

utiliser ce filtre de capitalisation

var app = angular.module('app', []);

app.controller('Ctrl', function ($scope) {
   $scope.msg = 'hello, world.';
});

app.filter('capitalize', function() {
    return function(input) {
      return (angular.isString(input) && input.length > 0) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : input;
    }
});

<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 de ne pas utiliser angular / js car vous pouvez simplement utiliser css à la place:

Dans votre css, ajoutez la classe:

.capitalize {
   text-transform: capitalize;
}

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

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

Aucun js nécessaire;)

Si vous utilisez Bootstrap , vous pouvez simplement ajouter la text-capitalizeclasse d'assistance:

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

EDIT: juste au cas où le lien meurt à nouveau:

Transformation de texte

Transformez le texte en composants avec des classes de capitalisation de texte.

texte en minuscules.
TEXTE EN MAJUSCULE.
Texte CapiTaliZed.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Notez que la mise en majuscule du texte ne modifie que la première lettre de chaque mot, laissant la casse des autres lettres inchangée.

Si vous utilisez Angular 4+, vous pouvez simplement utiliser titlecase

{{toUppercase | titlecase}}

pas besoin d'écrire des tuyaux.

une meilleure façon

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

Si vous recherchez des performances, essayez d'éviter d'utiliser les filtres AngularJS car ils sont appliqués deux fois par expression pour vérifier leur stabilité.

Une meilleure façon serait d'utiliser un ::first-letterpseudo-élément CSS avec text-transform: uppercase;. Cela ne peut pas être utilisé sur des éléments en ligne tels que span, cependant, la meilleure chose à faire serait d'utilisertext-transform: capitalize; sur tout le bloc, qui met en majuscule 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 (enfin, pas toujours) un meilleur choix, donc: text-transform: capitalize; est certainement la voie à suivre.

Mais que faire si votre contenu est tout en majuscules pour commencer? Si vous essayez un text-transform: capitalize;contenu comme "FOO BAR", vous obtiendrez toujours "FOO BAR" sur votre écran. Pour contourner ce problème, vous pouvez mettre le text-transform: capitalize;dans votre css, mais aussi minuscule votre chaîne, donc:

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

où nous utilisons la classe capitalize de @ TrampGuy:

.capitalize {
  text-transform: capitalize;
}

Donc, en prétendant que foo.awsome_propertycela afficherait normalement "FOO BAR", il imprimera maintenant le "Foo Bar" souhaité.

si vous voulez mettre en majuscule chaque mot de la 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(' ') : '';
    }
});

C'est une autre façon:

{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}

Pour Angular 2 et plus, vous pouvez utiliser {{ abc | titlecase }}.

Vérifiez l' API Angular.io pour la liste complète.

Pour 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 mettre en majuscule chaque mot d'une phrase, voici comment procéder:

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 mérite de la fonction de carte revient à @Naveen raj

En angular 7+ qui a un tuyau intégré

{{ yourText | titlecase  }}

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

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

var app = angular.module("app", []);
app.filter('capitalize', function() {
    return function(str) {
        if (str === undefined) return; // avoid undefined
        str = str.toLowerCase().split(" ");
        var c = '';
        for (var i = 0; i <= (str.length - 1); i++) {
            var word = ' ';
            for (var j = 0; j < str[i].length; j++) {
                c = str[i][j];
                if (j === 0) {
                    c = c.toUpperCase();
                }
                word += c;
            }
            str[i] = word;
        }
        str = str.join('');
        return str;
    }
});

Pour ajouter ma propre opinion 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 le placer dans votre Html comme ci-dessous;

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

Au lieu de cela, si vous souhaitez mettre en majuscule 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 "capitalize" à votre entrée de chaîne, par exemple - {{nom | capitaliser}}

dans Angular 4 ou CLI, vous pouvez créer un PIPE comme celui-ci:

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

Angular a 'titlecase' qui met en majuscule la première lettre d'une chaîne

Par exemple:

envName | titlecase

sera affiché comme EnvName

Lorsqu'il est utilisé avec l'interpolation, évitez tous les espaces comme

{{envName|titlecase}}

et la première lettre de valeur d'envName sera imprimée en majuscules.

if (value){
  value = (value.length > 1) ? value[0].toUpperCase() + value.substr(1).toLowerCase() : value.toUpperCase();
}

Vous pouvez ajouter une majuscule à l'exécution de la fonctionnalité comme suit:

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

{{ uppercase_expression | capitaliseFirst}} devrait marcher

Ajoutant à la réponse de Nidhish,

Pour les personnes que vous utilisez AngularJs et qui cherchent à mettre en majuscule la première lettre de chaque mot de la chaîne, utilisez le code ci-dessous:

var app = angular.module('app', []);

app.controller('Ctrl', function ($scope) {
   $scope.msg = 'hello, world.';
});

app.filter('titlecase', function() {
    return function(input) {
      //Check for valid string
      if(angular.isString(input) && input.length > 0) {
        var inputArray = input.split(' ');
        for(var i=0; i<inputArray.length; i++) {
          var value = inputArray[i];
          inputArray[i] =  value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
        }
        return inputArray.join(' ');
      } else {
        return input;
      }
    };
});

<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 | titlecase}}</p>
    </div>
</div>