Я хочу использовать первый символ строки в angularjs
Как я использовал {{ uppercase_expression | uppercase}}, он преобразует всю строку в верхний регистр.
Выполните первую букву строки в AngularJs
Ответ 1
использовать этот фильтр с заглавной буквы
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>Ответ 2
Я бы сказал, не используйте angular/js, так как вы можете просто использовать css вместо:
В вашем css добавьте класс:
.capitalize {
text-transform: capitalize;
}
Затем просто оберните выражение (для ex) в свой html:
<span class="capitalize">{{ uppercase_expression }}</span>
Нет необходимости в js;)
Ответ 3
Если вы используете Bootstrap, вы можете просто добавить вспомогательный класс text-capitalize:
<p class="text-capitalize">CapiTaliZed text.</p>
РЕДАКТИРОВАТЬ: на всякий случай ссылка снова умирает:
Преобразование текста
Преобразуйте текст в компоненты с помощью классов капитализации текста.
текст в нижнем регистре.
Перевернутый текст.
CapiTaliZed текст.<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>Обратите внимание, что text-capitalize меняет только первую букву каждого слова, не затрагивая регистр любых других букв.
Ответ 4
более удобный способ
app.filter('capitalize', function() {
return function(token) {
return token.charAt(0).toUpperCase() + token.slice(1);
}
});
Ответ 5
Если вы используете Angular 4+, тогда вы можете просто использовать titlecase
{{toUppercase | titlecase}}
не нужно писать никаких труб.
Ответ 6
Мне нравится ответ от @TrampGuy
CSS всегда (ну, не всегда) лучший выбор, поэтому: text-transform: capitalize;, безусловно, путь.
Но что, если ваш контент имеет верхний регистр, чтобы начать? Если вы попробуете text-transform: capitalize; в контенте, таком как "FOO BAR" , вы все равно получите "FOO BAR" на вашем дисплее. Чтобы обойти эту проблему, вы можете поместить text-transform: capitalize; в свой css, но также введите строчную строку в нижнем регистре, поэтому:
<ul>
<li class="capitalize">{{ foo.awesome_property | lowercase }}</li>
</ul>
где мы используем класс @TrampGuy capizeize:
.capitalize {
text-transform: capitalize;
}
Итак, притворившись, что foo.awsome_property обычно печатает "FOO BAR" , он теперь печатает желаемую "Foo Bar".
Ответ 7
Если вы после производительности, старайтесь избегать использования фильтров AngularJS, поскольку они применяются дважды для каждого выражения, чтобы проверить их стабильность.
Лучшим способом было бы использовать псевдоэлемент CSS ::first-letter с text-transform: uppercase;. Это не может быть использовано для встроенных элементов, таких как span, поэтому лучше всего использовать text-transform: capitalize; для всего блока, который заглавные буквы каждого слова.
Пример:
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>Ответ 8
если вы хотите загладить каждое слово из строки (в процессе → В процессе), вы можете использовать такой массив.
.filter('capitalize', function() {
return function(input) {
return (!!input) ? input.split(' ').map(function(wrd){return wrd.charAt(0).toUpperCase() + wrd.substr(1).toLowerCase();}).join(' ') : '';
}
});
Ответ 9
Это другой способ:
{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}
Ответ 10
Для Angular 2 и выше вы можете использовать {{ abc | titlecase }} {{ abc | titlecase }}.
Проверьте Angular.io API для полного списка.
Ответ 11
.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>Ответ 12
Для AngularJS из meanjs.org я помещаю пользовательские фильтры в modules/core/client/app/init.js
Мне понадобился настраиваемый фильтр, чтобы загладить каждое слово в предложении, вот как я это делаю:
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(" ");
}
});
Кредит функции карты переходит на @Naveen raj
Ответ 13
Если вы не хотите создавать настраиваемый фильтр, вы можете напрямую использовать
{{ foo.awesome_property.substring(0,1) | uppercase}}{{foo.awesome_property.substring(1)}}
Ответ 14
Просто, чтобы добавить свой собственный подход к этой проблеме, я сам использовал бы собственную директиву;
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;
});
}
};
После объявления вы можете разместить свой Html, как показано ниже:
<input ng-model="surname" ng-trim="false" capitalization>
Ответ 15
Вместо этого, если вы хотите загладить каждое слово предложения, вы можете использовать этот код
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(' ');
}
});
и просто добавьте фильтр "capizeize" в свой ввод строки, для ex - {{name | выгоду}}
Ответ 16
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;
}
});
Ответ 17
в Angular 4 или CLI вы можете создать PIPE следующим образом:
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;
}
}
Ответ 18
Angular имеет заглавную букву, которая заглавная буква первой строки
Например:
envName | titlecase
будет отображаться как EnvName
При использовании с интерполяцией избегайте таких пробелов, как
{{envName|titlecase}}
и первая буква значения envName будет напечатана в верхнем регистре.
Ответ 19
if (value){
value = (value.length > 1) ? value[0].toUpperCase() + value.substr(1).toLowerCase() : value.toUpperCase();
}
Ответ 20
Вы можете добавить время выполнения функции заглавной буквы как:
<td>{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}</td>
Ответ 21
{{ uppercase_expression | capitaliseFirst}} должен работать