在 AngularJ 中将字符串的第一个字母大写

使用这个大写过滤器

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>

更好的方式

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

如果您希望字符串中的每个单词都大写(正在进行-> 正在进行) ，您可以像这样使用数组。

.filter('capitalize', function() {
return function(input) {
return (!!input) ? input.split(' ').map(function(wrd){return wrd.charAt(0).toUpperCase() + wrd.substr(1).toLowerCase();}).join(' ') : '';
}
});

对于 means js.org 的 AngularJS，我将定制过滤器放在 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(" ");


}
});

Map 函数的功劳属于@Naveen raj

如果你是性能之后，尽量避免使用 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>

只是添加我自己对这个问题的看法，我会使用自定义指令自己;

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>

我建议不要使用 angle/js，因为你可以简单地使用 css 代替:

在 css 中，添加类:

.capitalize {
text-transform: capitalize;
}

然后，简单地将表达式(for ex)包装在 html 中:

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

不需要 js;)

我喜欢“流浪汉”的回答

CSS 总是(好吧，并不总是)一个更好的选择，所以: text-transform: capitalize;当然是一个更好的选择。

但是，如果您的内容都是以大写字母开头呢？如果你在像“ FOOBAR”这样的内容上尝试 text-transform: capitalize;，你仍然会在你的显示器上看到“ FOOBAR”。为了解决这个问题，你可以在 css 中放入 text-transform: capitalize;，但是也要把你的字符串小写，所以:

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

我们使用的是@TrampGuy 的大写类:

.capitalize {
text-transform: capitalize;
}

因此，假设 foo.awsome_property通常会打印“ FOO BAR”，现在它将打印所需的“ FOO BAR”。

相反，如果你想大写一个句子的每个单词，那么你可以使用这个代码

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

对于 ex-\{\{ name | Capitalize }} ，只需在字符串输入中添加筛选器“大写”即可

如果使用 鞋带，只需添加 text-capitalize助手类:

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

编辑: 以防链接再次断开:

文字转换

使用文本大小写类转换组件中的文本。

小写字母的文本。
大写文本。
大写文字。

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

请注意，文本大写只改变每个单词的首字母，而不影响其他字母的大小写。

如果您不想构建自定义筛选器，那么可以直接使用

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

您可以在运行时添加大写功能，如下所示:

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

\{\{ uppercase_expression | capitaliseFirst}}应该能用

在角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;
}
}

对于角度2及以上，可以使用 \{\{ abc | titlecase }}。

检查 Angular.io API以获得完整的列表。

这是另一种方式:

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

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

如果你使用角4 + ，那么你可以只使用 titlecase

\{\{toUppercase | titlecase}}

不用写什么歌了。

Angular 有“ title case”，它将字符串中的第一个字母大写

例如:

envName | titlecase

将显示为 EnvName

与插值一起使用时，请避免使用

\{\{envName|titlecase}}

EnvName 的值的第一个字母将以大写字母打印。

if (value){
value = (value.length > 1) ? value[0].toUpperCase() + value.substr(1).toLowerCase() : value.toUpperCase();
}

在角度7 + ，其中有内置的 烟斗

\{\{ yourText | titlecase  }}

您可以尝试将 String 分成两部分，并分别管理它们的用例。

\{\{ (Name.charAt(0) | uppercase) + "" + (Name.slice(1, element.length) | lowercase) }}

或者

\{\{ Name.charAt(0) | uppercase }} \{\{ Name.slice(1, element.length) | lowercase  }}

\{\{ uppercase _ expression. subr (0,1) . toUpperCase () + uppercase _ expression. subr (1)}}