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中字符串的第一个字母大写的主要内容,如果未能解决你的问题,请参考以下文章