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) &amp;&amp; s.length &gt; 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: inlinedisplay: flex,仅适用于 display:blockinline-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中字符串的第一个字母大写的主要内容,如果未能解决你的问题,请参考以下文章

大写字符串中的第一个字母[重复]

如何将字符串的第一个字母大写

如何使用Java将字符串中的第一个字母大写?

将字符串的第一个字母大写,而不触及其他字母

php将句子中的第二个字母大写最少10个字符

如何在飞镖中将字符串的第一个字母大写?