Pesquisa de site

javascript - Capitalizar a primeira letra de uma string no AngularJs

Eu quero capitalizar o primeiro caractere de uma string no AngularJS

Como usei {{ uppercase_expression | uppercase}}, ele converte toda a string para maiúsculas.

Resposta #1

use este filtro de 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>

Resposta #2

Eu diria para não usar angular/js, pois você pode simplesmente usar css em vez disso:

Em seu CSS, adicione a classe:

.capitalize {
   text-transform: capitalize;
}

Então, simplesmente envolva a expressão (por exemplo) no seu HTML:

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

Não é necessário JS ;)

Resposta #3

Se você usar o Bootstrap, pode simplesmente adicionar a classe auxiliar text-capitalize:

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

EDITAR: só por precaução, caso o link saia do ar novamente:

Transformação de Texto

Transforme o texto em componentes com classes de capitalização de texto.

texto em letras minúsculas.
TEXTO EM LETRAS MAIÚSCULAS.
Texto Capitalizado.

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

Observe como text-capitalize apenas altera a primeira letra de cada palavra, deixando o caso de quaisquer outras letras inalterado.

Resposta #4

Se você está usando Angular 4+ então você pode simplesmente usar titlecase

{{toUppercase | titlecase}}

não precisa escrever nenhum pipe.

Resposta #5

uma maneira mais agradável

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

Resposta #6

Eu gosto da resposta do @TrampGuy

CSS é sempre (bem, nem sempre) uma escolha melhor, então: text-transform: capitalize; certamente é o caminho a seguir.

Mas e se seu conteúdo já estiver todo em maiúsculas? Se você tentar text-transform: capitalize; em um conteúdo como "FOO BAR", você ainda verá "FOO BAR" na exibição. Para contornar esse problema, você poderia colocar o text-transform: capitalize; no seu CSS, mas também converter a sua string para minúsculas, assim:

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

onde estamos usando a classe capitalize do @TrampGuy:

.capitalize {
  text-transform: capitalize;
}

Então, fingindo que foo.awsome_property normalmente imprimiria "FOO BAR", agora ele imprimirá o desejado "Foo Bar".

Resposta #7

Se você busca desempenho, tente evitar o uso de filtros do AngularJS, pois eles são aplicados duas vezes em cada expressão para verificar sua estabilidade.

Uma maneira melhor seria usar o pseudo-elemento CSS ::first-letter com text-transform: uppercase;. No entanto, isso não pode ser usado em elementos inline como span, então a próxima melhor opção seria usar text-transform: capitalize; em todo o bloco, o 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>

Resposta #8

se você quiser capitalizar cada palavra de uma string (em andamento -> Em Andamento), você pode usar um array assim.

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

Resposta #9

Esta é outra maneira:

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

Artigos relacionados