Coloque em maiúscula a primeira letra da string em AngularJs


134

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.


1
Sim, você terá que escrever algum código. Angular não fará tudo por você. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... , developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
JB Nizet

11
Isso também pode ser feito usando CSS. Confira a propriedade text-transform: capitalize
Ramanathan Muthuraman

1
Você pode usar esta solução se realmente deseja usar o angular: codepen.io/WinterJoey/pen/sfFaK
Yousef_Shamshoum 13/15/15

1
criar uma directiva / filtro simples que fará primeira letra do capital palavra para você ...
Pankaj Parkar

Respostas:


234

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>


11
Você recebe um erro se desejar capitalizar um número acidentalmente. O corpo da função deve ser esta: return (angular.isString(s) && s.length > 0) ? s[0].toUpperCase() + s.substr(1).toLowerCase() : s;. Se não for uma string, retorne-a inalterada.
Jabba

2
Aqui está escrito o filtro capitalização costume codepen.io/WinterJoey/pen/sfFaK
Michal

148

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


7
Esta transformada vai capitalizar primeira letra de cada palavra tão só é aplicável às cordas de uma só palavra
jakub.g

22
@ jakub.g Se você quiser apenas colocar a primeira palavra em maiúscula (bem, letra), basta expandir o seletor css com o :first-letterseletor de pseudoelementos. Mais alguma coisa descoberta? :)
Philzen 24/08/16

2
@Philzen Yes! Como você faria isso apenas com html? ;-)
Romain Vincent

@RomainVincent O que você quer dizer com "somente HTML"? Talvez minha resposta abaixo ajude (basta clicar em "Executar trecho de código" para vê-lo em ação). O conteúdo HTML é estático, você precisará pelo menos inserir CSS ou JS para modificar seu estilo, respectivamente o conteúdo DOM.
Philzen

4
Sinto muito, foi uma tentativa ruim de fazer uma piada.
Romain Vincent

57

Se você usa o Bootstrap , pode simplesmente adicionar a text-capitalizeclasse 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.


Maneira rápida e fácil de atingir a meta, isso também coloca em maiúscula a primeira letra de cada palavra na string, o que é legal.
Kisanme #

nos bastidores, isso é apenas o usotext-transform: capitalize;
cameck

27

Se você estiver usando Angular 4+, poderá usar apenas titlecase

{{toUppercase | titlecase}}

não precisa escrever nenhum cachimbo.


4
Esta é uma resposta incorreta - a pergunta pede para colocar em maiúscula a primeira letra da string, não a primeira letra de cada palavra.
Alex Peters6

23

uma maneira melhor

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

18

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


1
Infelizmente ::first-letternão funciona em display: inlineou display: flex, apenas no display:blockou inline-blockelementos
jakub.g

18

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_propertynormalmente imprimiria "FOO BAR", agora será impressa a desejada "Foo Bar".


14

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

11

Esta é outra maneira:

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

9

Para Angular 2 e superior, você pode usar {{ abc | titlecase }}.

Verifique a API do Angular.io para obter a lista completa.


1
Esta é uma resposta incorreta - a pergunta pede para colocar em maiúscula a primeira letra da string, não a primeira letra de cada palavra.
Alex Peters6

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

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



2

Se você não deseja criar um filtro personalizado, pode usar diretamente

{{ 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
Embora esse snippet de código possa ser a solução, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
Peacetype 20/01/19

1

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>

1

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


0

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

0

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.


1
Esta não fornece qualquer valor para a resposta acima
Ivan Kaloyanov

1
Esta é uma resposta incorreta - a pergunta pede para colocar em maiúscula a primeira letra da string, não a primeira letra de cada palavra.
Alex Peters

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

-1

Você pode adicionar o tempo de execução da funcionalidade de capitalização como:

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


-2

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>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.