javascript - regular - primera letra de cada palabra en mayuscula mysql
Poner en mayúscula la primera letra de cadena en AngularJs (20)
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.
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.
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}}
Esta es otra forma:
{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}
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".
Para Angular 2 y superior, puede usar
{{ abc | titlecase }}
{{ abc | titlecase }}
.
Consulte la API de Angular.io para obtener una lista completa.
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
Puede agregar el tiempo de ejecución de la funcionalidad de mayúsculas como:
<td>{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}</td>
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>
Si está utilizando Angular 4+, puede usar
titlecase
{{toUppercase | titlecase}}
No tienes que escribir ninguna pipa.
Si no desea crear un filtro personalizado, puede usarlo directamente
{{ foo.awesome_property.substring(0,1) | uppercase}}{{foo.awesome_property.substring(1)}}
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.
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>
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;)
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;
}
}
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('' '') : '''';
}
});
una mejor manera
app.filter(''capitalize'', function() {
return function(token) {
return token.charAt(0).toUpperCase() + token.slice(1);
}
});
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>
.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>
{{ uppercase_expression | capitaliseFirst}}
{{ uppercase_expression | capitaliseFirst}}
debería funcionar
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;
}
});