javascript - regular - primera letra de cada palabra en mayuscula mysql

Poner en mayúscula la primera letra de cadena en AngularJs

Question

Quiero poner en mayúscula el primer carácter de la cadena en angularjs

Como usé {{ uppercase_expression | uppercase}} {{ uppercase_expression | uppercase}} convierte una cadena completa en mayúscula.

Answer 1

Angular tiene ''titlecase'' que escribe en mayúscula la primera letra de una cadena

Por ej .:

envName | titlecase

se mostrará como EnvName

Cuando se usa con interpolación, evite todos los espacios como

{{envName|titlecase}}

y la primera letra de valor de envName se imprimirá en mayúscula.

Answer 2

En cambio, si desea poner en mayúscula cada palabra de una oración, puede usar este 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('' ''); 
  }
});

y simplemente agregue el filtro "capitalizar" a su entrada de cadena, por ejemplo - {{name | capitalizar}}

Answer 3

Esta es otra forma:

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

Answer 4

Me gusta la respuesta de @TrampGuy

CSS es siempre (bueno, no siempre) una mejor opción, entonces: text-transform: capitalize; es sin duda el camino a seguir.

Pero, ¿qué pasa si su contenido es todo en mayúscula para empezar? Si intenta text-transform: capitalize; en contenido como "FOO BAR" aún obtendrá "FOO BAR" en su pantalla. Para solucionar ese problema, puede poner la text-transform: capitalize; en su CSS, pero también en minúscula su cadena, entonces:

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

donde estamos usando la clase de capitalización de @ TrampGuy:

.capitalize {
  text-transform: capitalize;
}

Entonces, pretendiendo que foo.awsome_property normalmente imprimiría "FOO BAR", ahora imprimirá la deseada "Foo Bar".

Answer 5

Para Angular 2 y superior, puede usar {{ abc | titlecase }} {{ abc | titlecase }} .

Consulte la API de Angular.io para obtener una lista completa.

Answer 6

Para AngularJS de meanjs.org, coloco los filtros personalizados en modules/core/client/app/init.js

Necesitaba un filtro personalizado para capitalizar cada palabra en una oración, así es como lo hago:

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

}
});

El crédito de la función de mapa va a @Naveen raj

Answer 7

Puede agregar el tiempo de ejecución de la funcionalidad de mayúsculas como:

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

Answer 8

Si busca rendimiento, trate de evitar el uso de filtros AngularJS, ya que se aplican dos veces por cada expresión para verificar su estabilidad.

Una mejor manera sería usar CSS ::first-letter pseudo-elemento de ::first-letter con text-transform: uppercase; . Sin embargo, eso no se puede usar en elementos en línea como span , por lo que lo mejor sería usar text-transform: capitalize; en todo el bloque, que capitaliza cada palabra.

Ejemplo:

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>

Answer 9

Si está utilizando Angular 4+, puede usar titlecase

{{toUppercase | titlecase}}

No tienes que escribir ninguna pipa.

Answer 10

Si no desea crear un filtro personalizado, puede usarlo directamente

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

Answer 11

Si usa Bootstrap , simplemente puede agregar la clase auxiliar de text-capitalize :

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

EDITAR: en caso de que el enlace vuelva a morir:

Transformación de texto

Transformar texto en componentes con clases de capitalización de texto.

texto en minúscula
TEXTO MAYOR
Texto CapiTaliZed.

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

Observe cómo el uso de mayúsculas y minúsculas solo cambia la primera letra de cada palabra, sin afectar el caso de otras letras.

Answer 12

Solo para agregar mi propia opinión sobre este tema, yo mismo usaría una directiva 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;
        });
    }
};

Una vez declarado, puede colocarlo dentro de su Html como se muestra a continuación;

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

Answer 13

Yo diría que no use angular / js ya que simplemente puede usar css en su lugar:

En su CSS, agregue la clase:

.capitalize {
   text-transform: capitalize;
}

Luego, simplemente envuelva la expresión (por ej.) En su html:

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

No se necesita js;)

Answer 14

en Angular 4 o CLI puede crear un TUBO 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;
  }
}

Answer 15

si desea poner en mayúscula cada palabra de la cadena (en progreso -> En progreso), puede usar una 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('' '') : '''';
    }
});

Answer 16

una mejor manera

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

Answer 17

usa este filtro de mayú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>

Answer 18

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

Answer 19

{{ uppercase_expression | capitaliseFirst}} {{ uppercase_expression | capitaliseFirst}} debería funcionar

Answer 20

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