AngularJs中字符串的第一个字母大写
Posted
技术标签:
【中文标题】AngularJs中字符串的第一个字母大写【英文标题】：Capitalize the first letter of string in AngularJs 【发布时间】：2015-07-24 07:04:55 【问题描述】：我想在angularjs中将字符串的第一个字符大写
当我使用 uppercase_expression | uppercase 时，它将整个字符串转换为大写。
【问题讨论】：
是的，您必须编写一些代码。 Angular 不会为你做一切。 developer.mozilla.org/en-US/docs/Web/javascript/Reference/…, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 这也可以使用 CSS 来完成。查看 text-transform: capitalize 属性 如果你真的想使用 angular，你可以使用这个解决方案：codepen.io/WinterJoey/pen/sfFaK 创建一个简单的指令/过滤器，它将为您生成首字母大写... 【参考方案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>【讨论】：
如果您想不小心将数字大写，则会出现错误。函数的主体应该是这样的：return (angular.isString(s) && s.length > 0) ? s[0].toUpperCase() + s.substr(1).toLowerCase() : s;。如果不是字符串，则原样返回。
这里写的是自定义大小写过滤器codepen.io/WinterJoey/pen/sfFaK【参考方案2】：
我想说不要使用 angular/js，因为你可以简单地使用 css：
在你的 css 中，添加类：
.capitalize
text-transform: capitalize;
然后，只需将表达式 (for ex) 包含在您的 html 中：
<span class="capitalize"> uppercase_expression </span>
不需要 js ;)
【讨论】：
此转换将大写 First Letter Of Each Word 因此仅适用于单字字符串 @jakub.g 如果您只想将第一个单词（嗯，字母）大写，只需使用:first-letter 伪元素选择器来解释 css 选择器。还有什么没有被发现的吗？ :)
@Philzen 是的！您将如何仅使用 html 来执行此操作？ ;-)
@RomainVincent “仅 HTML”是什么意思？也许我的answer below 有帮助（只需单击“运行代码 sn-p”即可查看它的运行情况）。 HTML 内容是静态的，你至少需要添加一些 CSS 或 JS 来修改其样式，分别是 DOM 内容。
对不起，这是一个不好的玩笑尝试。【参考方案3】：
如果你使用Bootstrap，你可以简单地添加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>请注意 text-capitalize 如何仅更改每个单词的第一个字母，而不影响任何其他字母的大小写。
【讨论】：
实现目标的快速简便的方法，这也将字符串中每个单词的首字母大写，这很酷。 这只是在幕后使用text-transform: capitalize;【参考方案4】：
如果您使用的是 Angular 4+，那么您可以使用 titlecase
toUppercase | titlecase
不必编写任何管道。
【讨论】：
这是一个错误的答案——问题要求将字符串的第一个字母大写，而不是每个单词的第一个字母。【参考方案5】：更好的方法
app.filter('capitalize', function()
return function(token)
return token.charAt(0).toUpperCase() + token.slice(1);
);
【讨论】：
【参考方案6】：我喜欢@TrampGuy 的回答
CSS 总是（嗯，不总是）更好的选择，所以：text-transform: capitalize; 肯定是要走的路。
但是，如果您的内容以全部大写开头怎么办？如果您在“FOO BAR”之类的内容上尝试text-transform: capitalize;，您仍然会在显示中看到“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”。
【讨论】：
【参考方案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>【讨论】：
很遗憾，::first-letter 不适用于 display: inline 或 display: flex，仅适用于 display:block 或 inline-block 元素【参考方案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 | uppercasesome_str.substr(1) | lowercase
【讨论】：
【参考方案10】：对于 Angular 2 及更高版本，您可以使用 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】：对于来自 meanjs.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(" ");
);
地图功能的功劳归于@Naveen raj
【讨论】：
【参考方案13】：Angular 7+ 内置pipe
yourText | titlecase
【讨论】：
【参考方案14】：如果您不想构建自定义过滤器，则可以直接使用
foo.awesome_property.substring(0,1) | uppercasefoo.awesome_property.substring(1)
【讨论】：
【参考方案15】：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;
);
【讨论】：
虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。【参考方案16】：为了在这个问题上添加我自己的看法，我自己会使用自定义指令；
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>
【讨论】：
【参考方案17】：如果您想将句子的每个单词大写，则可以使用此代码
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(' ');
);
只需将过滤器“capitalize”添加到您的字符串输入中，例如 - name |大写
【讨论】：
【参考方案18】：在 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;
【讨论】：
【参考方案19】：Angular 有 'titlecase' 将字符串中的第一个字母大写
例如：
envName | titlecase
将显示为 EnvName
与插值一起使用时，避免所有空格，如
envName|titlecase
并且 envName 的值的第一个字母将以大写形式打印。
【讨论】：
这对上述答案没有任何价值 这是一个错误的答案——问题要求将字符串的第一个字母大写，而不是每个单词的第一个字母。【参考方案20】：if (value)
value = (value.length > 1) ? value[0].toUpperCase() + value.substr(1).toLowerCase() : value.toUpperCase();
【讨论】：
【参考方案21】：您可以尝试将您的字符串分成两部分并分别管理它们的大小写。
(Name.charAt(0) | uppercase) + "" + (Name.slice(1, element.length) | lowercase)
或
Name.charAt(0) | uppercase Name.slice(1, element.length) | lowercase
【讨论】：
【参考方案22】：您可以将大写功能运行时间添加为：
<td>lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()</td>
【讨论】：
【参考方案23】： uppercase_expression | capitaliseFirst 应该可以工作
【讨论】：
以上是关于AngularJs中字符串的第一个字母大写的主要内容，如果未能解决你的问题，请参考以下文章