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

Question

我想将angularjs中字符串的第一个字符大写

就像我以前那样{{uppercase_expression|uppercase}}它将整个字符串转换为大写。

Answer 1

使用此大写过滤器

var app=角度模块（'app'，[]）；app.controller（'Ctrl'，函数（$scope）{$scope.msg=“你好，世界。”；});app.filter（'capitalize'，function（）{返回函数（输入）{return（angular.isString（input）&&input.length>0）？input.charAt（0）.toUpperCase（）+input.substr（1）.toLowerCase（（）：输入；}});

<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>我的文本：</b>{{msg|capitalie}}</p></div></div>

Answer 2

我建议不要使用angular/js，因为您可以简单地使用css：

在css中，添加类：

.大写{文本转换：大写；}

然后，只需将表达式（例如）包装在html中：

{{uppercase_expression}}</span>

不需要js；）

Answer 3

如果您使用引导数据库，只需添加文本大写助手类：

CapiTaliZed文本</p>（第页）

编辑：万一链接再次失效：

文本转换

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

小写文本。
大写文本。
CapiTaliZed文本。

<p class=“text-lowercase”>小写文本</p>（第页）<p class=“text-uppercase”>大写文本</p>（第页）CapiTaliZed文本</p>（第页）

注意，text-capitalize只更改每个单词的第一个字母，而不影响其他字母的大小写。

Answer 4

如果您使用的是Angular 4+，则只需使用标题酶

{{toUppercase|titlecase}}

不必编写任何管道。

Answer 5

更好的方式

app.filter（'capitalize'，function（）{返回函数（标记）{return token.charAt（0）.toUpperCase（）+token.slice（1）；}});

Answer 6

我喜欢@TrampGuy的回答

CSS总是（好吧，并不总是）一个更好的选择，所以：文本转换：大写；当然是要走的路。

但如果你的内容一开始都是大写的呢？如果你尝试文本转换：大写；在“FOO BAR”之类的内容上，您仍然可以在显示器中看到“FOO BOR”。为了解决这个问题，你可以文本转换：大写；在css中，但也要将字符串小写，因此：

<ul>{{foo.awesome_property|小写}}</li></ul>

我们使用@TrampGuy的大写类：

.大写{文本转换：大写；}

所以，假装foo.awsome_property公司通常会打印“FOO BAR”，现在将打印所需的“FOO BAR”。

Answer 7

如果您追求性能，请尽量避免使用AngularJS过滤器，因为每个表达式都会应用两次它们，以检查其稳定性。

更好的方法是使用CSS：：第一个字母伪元素text-transform：大写；。它不能用于内联元素，例如跨度不过，所以下一个最好的方法是使用文本转换：大写；在整个块上，每个单词都大写。

例子：

var app=角度模块（'app'，[]）；app.controller（'Ctrl'，函数（$scope）{$scope.msg=“你好，世界。”；});

.大写{显示：嵌入式块；}.大写：：第一个字母{text-transform：大写；}.大写2{文本转换：大写；}

<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>我的文本：</b><div class=“capitalize”>｛｛msg｝｝</div><p><b>我的文字：{{msg}}</p></div></div>

Answer 8

如果您想将字符串中的每个单词大写（inprogress->InProgress），可以这样使用数组。

.filter（'capitalize'，函数（）{返回函数（输入）{返回（！！输入）？input.split（“”）.map（函数（wrd）{return wrd.charAt（0）.toUpperCase（）+wrd.subster（1）.toLowerCase（；}）.join（“”；}});

Answer 9

这是另一种方式：

{{some_str|limitTo:1|大写}}{{somestr.substr（1）|小写}}

Answer 10

对于Angular 2和更高版本，可以使用{{abc|titlecase}}.

检查Angular.io API（角度.io API）查看完整列表。

Answer 11

.大写{显示：嵌入式块；}.大写：第一个字母{字体大小：2em；文本转换：大写；}

<span class=“大写”>事实上，很久以前，我的后端有一个格式不正确的输出，<strong>全部用小写</strong>，因此看起来并不像想象的那么花哨，但随后出现了级联样式表（我们都知道这是<a href=“http://9gag.com/gag/6709/css-is-awesome网站“>棒极了</a>）用现代伪选择器来解救。。。</span>

Answer 12

角度为7+，内置管

{{yourText|titlecase}}

Answer 13

对于来自meanjs.org的AngularJS，我将自定义过滤器放在模块/core/client/app/init.js

我需要一个自定义过滤器来将句子中的每个单词大写，我是这样做的：

angular.module（ApplicationConfiguration.applicationModuleName）.filter（'capitalize'，function（）{返回函数（str）{return str.split（“”）.map（函数（输入）｛return（！！input）？input.charAt（0）.toUpperCase（）+input.substr（1）.toLowerCase（）：''｝）.join（“”）；}});

地图功能的功劳归于@Naveen raj

Answer 14

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

｛｛foo.awesome_property.substring（0,1）|大写｝｝｛foo.awesome_property.substring（1）｝｝

Answer 15

var app=角度模块（“app”，[]）；app.filter（'capitalize'，function（）{返回函数（str）{if（str===未定义）返回；//避免未定义str=str.toLowerCase（）.split（“”）；var c=“”；对于（var i=0；i<=（str.length-1））；i++）{var单词=“”；对于（var j=0；j<str[i].length；j++）{c=str[i][j]；如果（j===0）{c=c.至UpperCase（）；}单词+=c；}str[i]=单词；}str=str.join（“”）；返回str；}});

Answer 16

为了补充我自己对这个问题的看法，我会自己使用自定义指令；

app.指令（“资本化”，函数（）{返回{require:'ngModel'，链接：函数（scope、element、attrs、modelCtrl）{模型Ctrl$parsers.push（函数（inputValue）{var transformedInput=（！！inputValue）？inputValue.charAt（0）.toUpperCase（）+inputValue.substr（1）.toLowerBase（）：“”；if（transformedInput！=输入值）{模型Ctrl$setViewValue（transformedInput）；模型Ctrl$渲染（）；}return transformedInput；});}};

声明后，您可以将其放入Html中，如下所示；

<input ng-model=“surname”ng-trim=“false”大写>

Answer 17

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

app.filter（'capitalize'，function（）{返回函数（输入，作用域）{if（输入！=空）input=input.toLowerCase（）.split（“”）；for（var i=0；i<输入长度；i++）{//您不需要检查i是否大于输入长度，因为您的for为您做了这件事//将其分配回阵列input[i]=输入[i].charAt（0）.toUpperCase（）+输入[i].substring（1）；}//直接返回连接的字符串return input.join（“”）；}});

只需将过滤器“大写”添加到字符串输入中，例如-{{name|capitalize}}

Answer 18

在Angular 4或CLI中，您可以创建这样的PIPE：

从“@angular/core”导入｛Pipe，PipeTransform｝；@管道({name:'大写'})/***每个单词的第一个字母用大写字母，另一个用小写字母。例：LORO说话=LORO说话*/导出类CapitalizePipe实现PipeTransform{转换（值：任意）：任意{value=value.replace（“”，“”）；if（值）{设w=''；if（value.split（''）.length>0）{value.split（''）.forEach（单词=>{w+=word.charAt（0）.toUpperCase（）+word.toString（）.substr（1，word.length）.toLowerCase（});}其他{w=value.charAt（0）.toUpperCase（）+value.toString（）.substr（1，value.length）.toLowerCase（；}返回w；}返回值；}}

Answer 19

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

例如：

envName|标题

将显示为EnvName

与插值一起使用时，请避免使用以下所有空格

{{envName|titlecase}}

envName值的第一个字母将以大写形式打印。

Answer 20

if（值）{value=（value.length>1）？value[0].toUpperCase（）+value.substr（1）.toLowerCase（；}

Answer 21

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

{{（Name.charAt（0）|大写）+“”+（Name.slice（1，element.length）|小写）}}

或

{{Name.charAt（0）|大写}}{{Name.slice（1，element.length）|小写}}}

Answer 22

{{uppercase_expression.subtr（0,1）.toUpperCase（）+uppercase_expression.sUBRT（1）}}

Answer 23

您可以将大写功能运行时添加为：

<td>｛｛lastName.charAt（0）.toUpperCase（）+lastName.substr（1）.toLowerCase（）｝｝</td>

Answer 24

{{uppercase_expression|capitalieFirst}}应该有效