Я хочу використовувати великі літери рядка в angularjs
Як я використав {{ uppercase_expression | uppercase}}
це перетворити цілу рядок у верхній регістр.
Я хочу використовувати великі літери рядка в angularjs
Як я використав {{ uppercase_expression | uppercase}}
це перетворити цілу рядок у верхній регістр.
Відповіді:
використовувати цей фільтр з великої літери
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>
return (angular.isString(s) && s.length > 0) ? s[0].toUpperCase() + s.substr(1).toLowerCase() : s;
. Якщо це не рядок, поверніть його незмінним.
Я б сказав, що не використовуйте angular / js, оскільки ви можете просто використовувати css замість цього:
У css додайте клас:
.capitalize {
text-transform: capitalize;
}
Потім просто загорніть вираз (для колишнього) у ваш HTML:
<span class="capitalize">{{ uppercase_expression }}</span>
Не потрібно js;)
:first-letter
псевдоелементів. Що-небудь ще залишилося непокритим? :)
Якщо ви використовуєте Bootstrap , ви можете просто додати text-capitalize
хелперний клас:
<p class="text-capitalize">CapiTaliZed text.</p>
EDIT: про всяк випадок, коли посилання знову загине:
Перетворення тексту
Перетворення тексту в компоненти з класами з великої літери тексту.
текст у нижньому регістрі.
ПОВЕРХНЕНИЙ ТЕКСТ.
CapiTaliZed Text.<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>
Зверніть увагу, як величина з великої літери змінює лише першу букву кожного слова, не залишаючи жодних змін літери інших букв.
text-transform: capitalize;
Якщо ви використовуєте Angular 4+, тоді ви можете просто використовувати titlecase
{{toUppercase | titlecase}}
не потрібно писати жодних труб.
приємніший спосіб
app.filter('capitalize', function() {
return function(token) {
return token.charAt(0).toUpperCase() + token.slice(1);
}
});
Якщо ви працюєте після роботи, намагайтеся уникати використання фільтрів AngularJS, оскільки вони застосовуються двічі за кожне вираження, щоб перевірити їх стійкість.
Кращим способом було б використання ::first-letter
псевдоелемента CSS за допомогою 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>
::first-letter
не працює на display: inline
або display: flex
, тільки display:block
або inline-block
елементів
Мені подобається відповідь від @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:
.capitalize {
text-transform: capitalize;
}
Отже, роблячи вигляд, що foo.awsome_property
зазвичай надрукується "FOO BAR", він надрукує потрібну "Foo Bar".
якщо ви хочете писати великими літерами кожне слово з рядка (триває -> В процесі), ви можете використовувати такий масив.
.filter('capitalize', function() {
return function(input) {
return (!!input) ? input.split(' ').map(function(wrd){return wrd.charAt(0).toUpperCase() + wrd.substr(1).toLowerCase();}).join(' ') : '';
}
});
Це ще один спосіб:
{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}
Для кутових 2 і вище ви можете використовувати {{ abc | titlecase }}
.
Перевірте Angular.io API для повного списку.
.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>
Для 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
У кутовому 7+, який має вбудовану трубу
{{ yourText | titlecase }}
Якщо ви не хочете створювати спеціальний фільтр, ви можете використовувати його безпосередньо
{{ foo.awesome_property.substring(0,1) | uppercase}}{{foo.awesome_property.substring(1)}}
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;
}
});
Просто для того, щоб додати свою власну справу з цього питання, я б сам застосував власну директиву;
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>
Натомість, якщо ви хочете використовувати великі літери на кожному реченні, тоді ви можете використовувати цей код
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(' ');
}
});
і просто додайте фільтр "з великої літери" до вхідного рядка, наприклад, {{name | з великої величини}}
в кутовій 4 або CLI ви можете створити ПІП так:
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;
}
}
У куті є 'titlecase', який пише великі літери у рядку
Наприклад:
envName | titlecase
відображатиметься як EnvName
При використанні з інтерполяцією уникайте всіх подібних просторів
{{envName|titlecase}}
і перша літера значення envName буде надрукована у верхньому регістрі.
Ви можете додати час використання функцій з великим розміром як:
<td>{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}</td>
{{ uppercase_expression | capitaliseFirst}}
повинен працювати
Додавши відповідь Нідхіша,
Для людей, які ви використовуєте AngularJs і прагнете використовувати велику літеру кожного слова в рядку, використовуйте код нижче:
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>