Javascript 在 AngularJs 中将字符串的第一个字母大写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30207272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Capitalize the first letter of string in AngularJs
提问by Piyush
I want capitalize first character of string in angularjs
我想在 angularjs 中大写字符串的第一个字符
As i used {{ uppercase_expression | uppercase}}it convert whole string to upper case.
当我使用{{ uppercase_expression | uppercase}}它时，它将整个字符串转换为大写。
回答by Nidhish Krishnan
use this capitalize filter
使用这个大写过滤器
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>回答by TrampGuy
I'd say don't use angular/js as you can simply use css instead:
我想说不要使用 angular/js，因为您可以简单地使用 css：
In your css, add the class:
在你的 css 中，添加类：
.capitalize {
text-transform: capitalize;
}
Then, simply wrap the expression (for ex) in your html:
然后，只需将表达式（例如）包装在您的 html 中：
<span class="capitalize">{{ uppercase_expression }}</span>
No js needed ;)
不需要js ;)
回答by minimalpop
If you use Bootstrap, you can simply add the text-capitalizehelper class:
如果你使用Bootstrap，你可以简单地添加text-capitalize辅助类：
<p class="text-capitalize">CapiTaliZed text.</p>
EDIT: just in case the link dies again:
编辑：以防万一链接再次失效：
Text Transform
Transform text in components with text capitalization classes.
lowercased text.
UPPERCASED TEXT.
CapiTaliZed Text.<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.
文本变换
使用文本大写类转换组件中的文本。
小写文本。
大写文本。
大写文本。<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>请注意 text-capitalize 如何仅更改每个单词的第一个字母，而不会影响任何其他字母的大小写。
回答by Abhishek Ekaanth
If you are using Angular 4+ then you can just use titlecase
如果您使用的是 Angular 4+，那么您可以使用 titlecase
{{toUppercase | titlecase}}
don't have to write any pipes.
不必编写任何管道。
回答by Patrik Melander
a nicer way
更好的方式
app.filter('capitalize', function() {
return function(token) {
return token.charAt(0).toUpperCase() + token.slice(1);
}
});
回答by Ryan Crews
I like the answer from @TrampGuy
我喜欢@TrampGuy 的回答
CSS is always (well, not always) a better choice, so: text-transform: capitalize;is certainly the way to go.
CSS 总是（嗯，并不总是）更好的选择，所以：text-transform: capitalize;当然是要走的路。
But what if your content is all uppercase to begin with? If you try text-transform: capitalize;on content like "FOO BAR" you'll still get "FOO BAR" in your display. To get around that issue you could put the text-transform: capitalize;in your css, but also lowercase your string, so:
但是，如果您的内容一开始都是大写怎么办？如果您尝试text-transform: capitalize;像“FOO BAR”这样的内容，您仍然会在显示中看到“FOO BAR”。为了解决这个问题，你可以把 放在text-transform: capitalize;你的 css 中，但也要小写你的字符串，所以：
<ul>
<li class="capitalize">{{ foo.awesome_property | lowercase }}</li>
</ul>
where we are using @TrampGuy's capitalize class:
我们在哪里使用@TrampGuy 的大写类：
.capitalize {
text-transform: capitalize;
}
So, pretending that foo.awsome_propertywould normally print "FOO BAR", it will now print the desired "Foo Bar".
因此，假设foo.awsome_property通常会打印“FOO BAR”，它现在将打印所需的“Foo Bar”。
回答by Gregor Eesmaa
If you are after performance, try to avoid using AngularJS filters as they are applied twice per each expression to check for their stability.
如果您追求性能，请尽量避免使用 AngularJS 过滤器，因为它们每个表达式应用两次以检查其稳定性。
A better way would be to use CSS ::first-letterpseudo-element with text-transform: uppercase;. That can't be used on inline elements such as span, though, so the next best thing would be to use text-transform: capitalize;on the whole block, which capitalizes every word.
更好的方法是将 CSS::first-letter伪元素与text-transform: uppercase;. 但是，这不能用于内联元素，例如span，因此下一个最好的方法是text-transform: capitalize;在整个块上使用，它使每个单词都大写。
Example:
例子：
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>回答by Naveen raj
if you want capitalize each word from string (in progress -> In Progress), you can use array like this.
如果您想将字符串中的每个单词大写（进行中 -> 进行中），您可以使用这样的数组。
.filter('capitalize', function() {
return function(input) {
return (!!input) ? input.split(' ').map(function(wrd){return wrd.charAt(0).toUpperCase() + wrd.substr(1).toLowerCase();}).join(' ') : '';
}
});
回答by pallav deshmukh
This is another way:
这是另一种方式：
{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}
回答by windmaomao
For Angular 2 and up, you can use {{ abc | titlecase }}.
对于 Angular 2 及更高版本，您可以使用{{ abc | titlecase }}.
Check Angular.io APIfor complete list.
检查Angular.io API以获取完整列表。
