web-dev-qa-db-fra.com

Capitaliser la première lettre de ficelle dans AngularJs

Je veux capitaliser le premier caractère de string dans angularjs

Comme j'ai utilisé {{ uppercase_expression | uppercase}} il convertit la chaîne entière en majuscule.

javascriptangularjsfilteruppercasecapitalize
123
Piyush

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>
228
Nidhish Krishnan

Je dirais que n'utilisez pas 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 code HTML:

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

Pas besoin de js;)

141
TrampGuy

Si vous utilisez Bootstrap , vous pouvez simplement ajouter la classe d'aide text-capitalize :

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

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

Transformation de texte

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

texte en minuscule.
TEXT UPPERCASED.
Texte de synthèse.

_<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 modifie uniquement la première lettre de chaque mot, sans affecter le cas de toutes les autres lettres.

54
minimalpop

une meilleure façon

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

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

{{toUppercase | titlecase}}

pas besoin d'écrire des pipes.

22
Abhishek Ekaanth

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

Une meilleure solution consisterait à utiliser le pseudo-élément CSS ::first-letter avec text-transform: uppercase;. Cela ne peut pas être utilisé sur des éléments en ligne tels que span, alors la meilleure chose à faire serait d'utiliser text-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>
16
Gregor Eesmaa

J'aime la réponse de @TrampGuy

CSS est toujours (bien, pas toujours) un meilleur choix, donc: text-transform: capitalize; est certainement la voie à suivre.

Mais que se passe-t-il si votre contenu est tout en majuscule pour commencer? Si vous essayez text-transform: capitalize; sur un contenu comme "FOO BAR", vous aurez toujours "FOO BAR" sur votre écran. Pour résoudre ce problème, vous pouvez mettre le text-transform: capitalize; dans votre css, mais aussi votre minuscule, donc:

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

où nous utilisons la classe de capitalisation de @ TrampGuy:

.capitalize {
  text-transform: capitalize;
}

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

15
Ryan Crews

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(' ') : '';
    }
});
14
Naveen raj

C'est une autre façon:

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

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

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

9
windmaomao
.capitalize {
  display: inline-block;
}

.capitalize:first-letter {
  font-size: 2em;
  text-transform: capitalize;
}
<span class="capitalize">
  really, once upon a time there was a badly formatted output coming from my backend, <strong>all completely in lowercase</strong> and thus not quite as fancy-looking as could be - but then cascading style sheets (which we all know are <a href="http://9gag.com/gag/6709/css-is-awesome">awesome</a>) with modern pseudo selectors came around to the rescue...
</span>
7
Philzen

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 chaque mot en majuscule 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 fonction map va à @Naveen raj

3
Maxim Mai

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

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

Pour ajouter mon point de vue 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 à l'intérieur de votre code HTML comme ci-dessous;

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

Au lieu de cela si vous voulez 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 - {{name | capitaliser}}

1
Akash Saxena
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;
    }
});
1
murali2486

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

Pour ex:

envName | titlecase

sera affiché comme EnvName

Lorsqu'il est utilisé avec une interpolation, évitez tous les espaces tels que

{{envName|titlecase}}

et la première lettre de valeur de envName sera imprimée en majuscule.

0
Vedha Peri

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