Quero capitalizar o primeiro caractere da string em angularjs
Como eu usei {{ uppercase_expression | uppercase}}
, converter toda a seqüência de caracteres em maiúsculas.
Quero capitalizar o primeiro caractere da string em angularjs
Como eu usei {{ uppercase_expression | uppercase}}
, converter toda a seqüência de caracteres em maiúsculas.
Respostas:
use este filtro em maiúsculas
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 não for uma string, retorne-a inalterada.
Eu diria que não use angular / js, pois você pode simplesmente usar css:
Em seu css, adicione a classe:
.capitalize {
text-transform: capitalize;
}
Em seguida, basta agrupar a expressão (por ex) no seu html:
<span class="capitalize">{{ uppercase_expression }}</span>
Não é necessário js;)
:first-letter
seletor de pseudoelementos. Mais alguma coisa descoberta? :)
Se você usa o Bootstrap , pode simplesmente adicionar a text-capitalize
classe auxiliar:
<p class="text-capitalize">CapiTaliZed text.</p>
EDIT: apenas no caso de o link morrer novamente:
Transformação de texto
Transforme texto em componentes com classes de capitalização de texto.
texto em minúsculas.
TEXTO EM MAIÚSCULAS.
Texto em maiúsculas.<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>
Observe como a maiúscula muda apenas a primeira letra de cada palavra, deixando o caso de outras letras inalteradas.
text-transform: capitalize;
Se você estiver usando Angular 4+, poderá usar apenas titlecase
{{toUppercase | titlecase}}
não precisa escrever nenhum cachimbo.
uma maneira melhor
app.filter('capitalize', function() {
return function(token) {
return token.charAt(0).toUpperCase() + token.slice(1);
}
});
Se você estiver após o desempenho, tente evitar o uso de filtros AngularJS, pois eles são aplicados duas vezes por cada expressão para verificar sua estabilidade.
Uma maneira melhor seria usar o ::first-letter
pseudoelemento CSS com text-transform: uppercase;
. Isso não pode ser usado em elementos embutidos, como span
, portanto, a próxima melhor coisa seria usar text-transform: capitalize;
em todo o bloco, que capitaliza cada palavra.
Exemplo:
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
não funciona em display: inline
ou display: flex
, apenas no display:block
ou inline-block
elementos
Gosto da resposta de @TrampGuy
CSS é sempre (bem, nem sempre) uma escolha melhor, então: text-transform: capitalize;
é certamente o caminho a percorrer.
Mas e se o seu conteúdo estiver em maiúsculas? Se você experimentar um text-transform: capitalize;
conteúdo como "FOO BAR", continuará exibindo "FOO BAR" em sua exibição. Para contornar esse problema, você pode colocar o text-transform: capitalize;
em seu css, mas também minúscula sua string, então:
<ul>
<li class="capitalize">{{ foo.awesome_property | lowercase }}</li>
</ul>
onde estamos usando a classe de capitalização de @ TrampGuy:
.capitalize {
text-transform: capitalize;
}
Então, fingindo que foo.awsome_property
normalmente imprimiria "FOO BAR", agora será impressa a desejada "Foo Bar".
se você deseja colocar em maiúscula cada palavra da string (em andamento -> Em andamento), pode usar uma matriz como esta.
.filter('capitalize', function() {
return function(input) {
return (!!input) ? input.split(' ').map(function(wrd){return wrd.charAt(0).toUpperCase() + wrd.substr(1).toLowerCase();}).join(' ') : '';
}
});
Esta é outra maneira:
{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}
Para Angular 2 e superior, você pode usar {{ abc | titlecase }}
.
Verifique a API do Angular.io para obter a lista completa.
.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>
Para o AngularJS de meanjs.org, coloco os filtros personalizados em modules/core/client/app/init.js
Eu precisava de um filtro personalizado para colocar em maiúscula cada palavra em uma frase, eis como eu faço isso:
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(" ");
}
});
O crédito da função de mapa vai para @Naveen raj
Em 7+ angular que foi construído com tubo
{{ yourText | titlecase }}
Se você não deseja criar um filtro personalizado, pode usar diretamente
{{ 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;
}
});
Apenas para adicionar minha opinião sobre esse assunto, eu mesmo usaria uma diretiva personalizada;
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;
});
}
};
Uma vez declarado, você pode colocar dentro do seu Html como abaixo;
<input ng-model="surname" ng-trim="false" capitalization>
Em vez disso, se você quiser colocar em maiúscula cada palavra de uma frase, pode usar esse código
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 apenas adicione o filtro "capitalize" à sua entrada de string, por ex - {{name | capitalizar}}
no Angular 4 ou na CLI, você pode criar um PIPE como este:
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 tem 'titlecase' que coloca em maiúscula a primeira letra de uma string
Por exemplo:
envName | titlecase
será exibido como EnvName
Quando usado com interpolação, evite todos os espaços como
{{envName|titlecase}}
e a primeira letra do valor de envName será impressa em maiúsculas.
Você pode adicionar o tempo de execução da funcionalidade de capitalização como:
<td>{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}</td>
{{ uppercase_expression | capitaliseFirst}}
Deveria trabalhar
Adicionando à resposta de Nidhish,
Para as pessoas que você usa AngularJs e procura colocar em maiúscula a primeira letra de cada palavra na string, use o código abaixo:
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>