Voglio scrivere in maiuscolo il primo carattere della stringa in angularjs
Come l'ho usato {{ uppercase_expression | uppercase}}
, convertire l'intera stringa in maiuscolo.
Voglio scrivere in maiuscolo il primo carattere della stringa in angularjs
Come l'ho usato {{ uppercase_expression | uppercase}}
, convertire l'intera stringa in maiuscolo.
Risposte:
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>
return (angular.isString(s) && s.length > 0) ? s[0].toUpperCase() + s.substr(1).toLowerCase() : s;
. Se non è una stringa, restituirla invariata.
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;)
:first-letter
pseudo-elemento. Qualcos'altro lasciato scoperto? :)
Se usi Bootstrap , puoi semplicemente aggiungere la text-capitalize
classe 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.
text-transform: capitalize;
Se stai usando Angular 4+, puoi semplicemente usare titlecase
{{toUppercase | titlecase}}
non è necessario scrivere pipe.
un modo migliore
app.filter('capitalize', function() {
return function(token) {
return token.charAt(0).toUpperCase() + token.slice(1);
}
});
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-letter
pseudo-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>
::first-letter
non funziona su display: inline
o display: flex
, solo su display:block
o inline-block
elementi
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_property
normalmente si stampi "FOO BAR", ora verrà stampato il desiderato "Foo Bar".
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(' ') : '';
}
});
Questo è un altro modo:
{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}
Per Angular 2 e versioni successive, è possibile utilizzare {{ abc | titlecase }}
.
Controlla Angular.io API per l'elenco completo.
.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>
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
In 7+ angolare con tubo incorporato
{{ yourText | titlecase }}
Se non vuoi creare un filtro personalizzato, puoi usarlo direttamente
{{ 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;
}
});
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>
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}}
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;
}
}
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.
È possibile aggiungere il tempo di esecuzione della capitalizzazione come:
<td>{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}</td>
{{ uppercase_expression | capitaliseFirst}}
dovrebbe funzionare
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>