Scrivi in ​​maiuscolo la prima lettera di stringa in AngularJs


134

Voglio scrivere in maiuscolo il primo carattere della stringa in angularjs

Come l'ho usato {{ uppercase_expression | uppercase}}, convertire l'intera stringa in maiuscolo.



11
Questo può essere fatto anche usando i CSS. Dai un'occhiata alla trasformazione del testo: capitalizza proprietà
Ramanathan Muthuraman

1
Puoi usare questa soluzione se vuoi davvero usare angular
Yousef_Shamshoum

1
crea una semplice direttiva / filtro che renderà la prima lettera della parola maiuscola per te ...
Pankaj Parkar

Risposte:


234

usa questo filtro maiuscolo

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>


11
Viene visualizzato un errore se si desidera capitalizzare un numero per errore. Il corpo della funzione dovrebbe essere questo: return (angular.isString(s) && s.length > 0) ? s[0].toUpperCase() + s.substr(1).toLowerCase() : s;. Se non è una stringa, restituirla invariata.
Jabba,

2
Qui è scritto il filtro di capitalizzazione personalizzato codepen.io/WinterJoey/pen/sfFaK
Michal

148

Direi di non usare angular / js in quanto puoi semplicemente usare css invece:

Nel tuo CSS, aggiungi la classe:

.capitalize {
   text-transform: capitalize;
}

Quindi, avvolgi semplicemente l'espressione (per esempio) nel tuo html:

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

Non è necessario js;)


7
Questa trasformazione metterà in maiuscolo la prima lettera di ogni parola, quindi è applicabile solo alle stringhe di una sola parola
jakub.g

22
@ jakub.g Se vuoi solo scrivere in maiuscolo la prima parola (beh, lettera), espandi semplicemente il selettore css con il selettore :first-letterpseudo-elemento. Qualcos'altro lasciato scoperto? :)
Philzen,

2
@Philzen Sì! Come lo faresti solo con HTML? ;-)
Romain Vincent,

@RomainVincent Cosa intendi con "solo HTML"? Forse la mia risposta qui sotto aiuta (basta fare clic su "Esegui snippet di codice" per vederlo in azione). Il contenuto HTML è statico, dovrai almeno inserire CSS o JS per modificarne lo stile, rispettivamente il contenuto DOM.
Philzen

4
Mi dispiace, è stato un brutto tentativo di fare uno scherzo.
Romain Vincent,

57

Se usi Bootstrap , puoi semplicemente aggiungere la text-capitalizeclasse helper:

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

MODIFICA: nel caso in cui il collegamento scompaia nuovamente:

Trasformazione del testo

Trasforma il testo in componenti con classi di capitalizzazione del testo.

testo minuscolo.
TESTO MAIUSCOLO.
Testo CapiTaliZed.

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

Nota come maiuscole e minuscole modificano solo la prima lettera di ogni parola, lasciando inalterato il caso delle altre lettere.


Modo semplice e veloce per raggiungere l'obiettivo, anche questo mette in maiuscolo la prima lettera di ogni parola nella stringa, il che è bello.
kisanme,

dietro le quinte questo è solo in usotext-transform: capitalize;
Cameck,

27

Se stai usando Angular 4+, puoi semplicemente usare titlecase

{{toUppercase | titlecase}}

non è necessario scrivere pipe.


4
Questa è una risposta errata: la domanda chiede di scrivere in maiuscolo la prima lettera della stringa, non la prima lettera di ogni parola.
Alex Peters,

23

un modo migliore

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

18

Se cerchi prestazioni, cerca di evitare l'uso dei filtri AngularJS poiché vengono applicati due volte per ogni espressione per verificarne la stabilità.

Un modo migliore sarebbe usare lo ::first-letterpseudo-elemento CSS con text-transform: uppercase;. Questo non può essere usato su elementi inline come span, però, quindi la cosa migliore da fare sarebbe usaretext-transform: capitalize; l'intero blocco, che capitalizza ogni parola.

Esempio:

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>


1
Sfortunatamente ::first-letternon funziona su display: inlineo display: flex, solo su display:blocko inline-blockelementi
jakub.g

18

Mi piace la risposta di @TrampGuy

CSS è sempre (beh, non sempre) una scelta migliore, quindi: text-transform: capitalize; è sicuramente la strada da percorrere.

E se i tuoi contenuti fossero tutti in maiuscolo per cominciare? Se provi text-transform: capitalize;contenuti come "FOO BAR" visualizzerai comunque "FOO BAR" sul display. Per ovviare a questo problema puoi inserire il text-transform: capitalize;tuo css, ma anche minuscole la tua stringa, quindi:

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

dove stiamo usando la classe di maiuscole di @ TrampGuy:

.capitalize {
  text-transform: capitalize;
}

Quindi, fingendo che foo.awsome_propertynormalmente si stampi "FOO BAR", ora verrà stampato il desiderato "Foo Bar".


14

se si desidera scrivere in maiuscolo ogni parola dalla stringa (in corso -> In corso), è possibile utilizzare l'array in questo modo.

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

11

Questo è un altro modo:

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

9

Per Angular 2 e versioni successive, è possibile utilizzare {{ abc | titlecase }}.

Controlla Angular.io API per l'elenco completo.


1
Questa è una risposta errata: la domanda chiede di scrivere in maiuscolo la prima lettera della stringa, non la prima lettera di ogni parola.
Alex Peters,

7

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


3

Per AngularJS di meanjs.org, inserisco i filtri personalizzati modules/core/client/app/init.js

Avevo bisogno di un filtro personalizzato per scrivere in maiuscolo ogni parola in una frase, ecco come lo faccio:

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(" ");

}
});

Il merito della funzione della mappa va a @Naveen raj



2

Se non vuoi creare un filtro personalizzato, puoi usarlo direttamente

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

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

2
Sebbene questo frammento di codice possa essere la soluzione, includendo una spiegazione aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro e quelle persone potrebbero non conoscere i motivi del tuo suggerimento sul codice.
peac

1

Solo per aggiungere la mia opinione su questo problema, vorrei utilizzare una direttiva personalizzata;

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

Una volta dichiarato, puoi inserirlo nel tuo HTML come di seguito;

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

1

Invece, se si desidera scrivere in maiuscolo ogni parola di una frase, è possibile utilizzare questo codice

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

e aggiungi il filtro "maiuscole" al tuo input di stringa, ad esempio - {{name | capitalizzare}}


0

in Angular 4 o CLI è possibile creare un TUBO come questo:

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

Angular ha 'titlecase' che mette in maiuscolo la prima lettera di una stringa

Ad esempio:

envName | titlecase

verrà visualizzato come EnvName

Se utilizzato con interpolazione, evitare tutti gli spazi come

{{envName|titlecase}}

e la prima lettera di valore di envName verrà stampata in maiuscolo.


1
Questo non fornisce alcun valore alla risposta sopra
Ivan Kaloyanov,

1
Questa è una risposta errata: la domanda chiede di scrivere in maiuscolo la prima lettera della stringa, non la prima lettera di ogni parola.
Alex Peters,

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

-1

È possibile aggiungere il tempo di esecuzione della capitalizzazione come:

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

-1

{{ uppercase_expression | capitaliseFirst}} dovrebbe funzionare


-2

Aggiungendo alla risposta di Nidhish,

Per le persone che stai utilizzando AngularJs e stai cercando di scrivere in maiuscolo la prima lettera di ogni parola nella stringa, usa il codice seguente:

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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.