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

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

---

当我使用

{{uppercase_expression | uppercase}}

时，它将整个字符串转换为大写。

使用这个大写过滤器

var-app=angular.module（'app'，[]）；
应用程序控制器（'Ctrl'，函数（$scope）{
$scope.msg='你好，世界'；
});
app.filter（'capitalize'，function（）{
返回函数（输入）{
返回（angular.isString（输入）和&input.length>0）？input.charAt（0）.toUpperCase（）+input.substr（1）.toLowerCase（）：输入；
}
});

我的文本：{{msg|capitalize}}

更好的方法

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

对于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(" ");

}
});

map函数的功劳归@Naveen raj
如果您在追求性能，请尽量避免使用AngularJS过滤器，因为每个表达式会应用两次AngularJS过滤器，以检查其稳定性

更好的方法是使用CSS
：：第一个字母
伪元素和
文本转换：大写。但是，这不能用于内联元素，例如
span
，因此下一个最好的方法是使用
文本转换：大写在整个块上，每个单词都大写

例如：


var-app=angular.module（'app'，[]）；
应用程序控制器（'Ctrl'，函数（$scope）{
$scope.msg='你好，世界'；
});
。大写{
显示：内联块；
}
.大写：：第一个字母{
文本转换：大写；
}
.2{
文本转换：大写；
}

我的文字：{{msg}
我的文字：{{msg}

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

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>

我想说的是，不要使用angular/js，因为您可以简单地使用css：

在css中，添加类：

.capitalize {
   text-transform: capitalize;
}

然后，只需将表达式（for ex）包装到html中：

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

{{uppercase\u expression}

不需要js；）
 我喜欢@TrampGuy的答案

CSS总是（不是总是）一个更好的选择，所以：
文本转换：大写
无疑是一条路要走

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

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

因此，假设
foo.awsome_属性
通常会打印“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(' '); 
  }
});

app.filter（'capitalize'，function（）{
返回函数（输入、范围）{
如果（输入！=null）
input=input.toLowerCase（）.split（“”）；
对于（变量i=0；i

只需将过滤器“capitalize”添加到字符串输入中，用于ex-{{name | capitalize}

。大写{
显示：内联块；
}
.大写：第一个字母{
字号：2em；
文本转换：大写；
}

真的，很久以前，我的后端有一个格式不好的输出，全部是小写的，因此看起来不像想象中的那么漂亮-但是后来，带有现代伪选择器的层叠样式表（我们都知道是这样）出现了。。。
如果使用，只需添加帮助器类：

<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>

{{lastName.charAt（0.toUpperCase（）+lastName.substr（1.toLowerCase（）}}
{{uppercase_expression | capitaliefirst}}
应该可以在Angular 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;
  }
}

对于Angular 2及以上，可以使用
{{abc|titlecase}

检查完整列表。
这是另一种方法：

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

var-app=angular.module（“app”，[]）；
app.filter（'capitalize'，function（）{
返回函数（str）{
if（str==undefined）返回；//避免未定义
str=str.toLowerCase（）.split（“”）；
var c=“”；
对于（var i=0；i如果您使用的是Angular 4+，那么您可以只使用
titlecase

{{toUppercase | titlecase}}

无需编写任何管道。
Angular有“titlecase”，它将字符串中的第一个字母大写

例如：

envName | titlecase

将显示为EnvName

与插值一起使用时，请避免使用所有空间，如

{{envName|titlecase}}

envName值的第一个字母将以大写形式打印。
使用内置的angular 7+

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

您可以尝试将字符串分为两部分，并分别管理它们的大小写

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

或

是的，你得写信
if (value){
  value = (value.length > 1) ? value[0].toUpperCase() + value.substr(1).toLowerCase() : value.toUpperCase();
}

{{ yourText | titlecase  }}

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

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