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

Question

我希望在AngularJS中将字符串的第一个字符大写。

当我使用{{ uppercase_expression | uppercase }}时，它会将整个字符串转换为大写字母。

- Piyush

---

是的，你需要编写一些代码。Angular不会为你做所有的事情。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring，https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase - JB Nizet

这也可以使用CSS来实现。查看text-transform: capitalize属性。 - Ramanathan Muthuraman

如果你真的想使用Angular，你可以使用这个解决方案：http://codepen.io/WinterJoey/pen/sfFaK - Yousef_Shamshoum

创建一个简单的指令/过滤器，可以使单词的第一个字母大写。 - Pankaj Parkar

Answer 1

使用 capitalize 过滤器

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>

- Nidhish Krishnan

---

如果你意外地想将一个数字大写，就会出现错误。该函数的主体应为：return (angular.isString(s) && s.length > 0) ? s[0].toUpperCase() + s.substr(1).toLowerCase() : s; 如果不是字符串，则返回未更改的值。 - Jabba

这里写着自定义大写字母过滤器 https://codepen.io/WinterJoey/pen/sfFaK - Skyware

Answer 2

我建议不要使用Angular/JS，因为您可以直接使用CSS：

在您的CSS中添加该类：

.capitalize {
   text-transform: capitalize;
}

然后，只需在你的HTML中包装表达式（例如）：

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

无需 JavaScript ;)

- TrampGuy

---

这个转换会将每个单词的首字母大写，因此仅适用于单词字符串。 - jakub.g

如果你只想将第一个单词（首字母）大写，可以使用 :first-letter 伪元素选择器扩展 CSS 选择器。还有其他需要解决的问题吗？ :) - Philzen

@Philzen 是的！你怎么只用HTML做到呢？;-) - Romain Vincent

@RomainVincent，“仅限HTML”是什么意思？也许我的下面的回答可以帮到你（只需单击“运行代码片段”即可查看其效果）。HTML内容是静态的，您至少需要添加一些CSS或JS来修改其样式或DOM内容。 - Philzen

很抱歉，那是个失败的笑话尝试。 - Romain Vincent

这通常是一个好主意，但如果我想要使用Angular进一步处理大写字符串，JavaScript / Angular仍将把它视为非大写字符串。 - Lea Reimann

Answer 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仅更改每个单词的第一个字母，而不影响任何其他字母的大小写。

- minimalpop

---

快速简便的方法来实现目标，同时这个方法可以将字符串中每个单词的首字母大写，非常酷。 - Nasik Shafeek

幕后，这只是使用了 text-transform: capitalize;。 - cameck

Answer 4

如果你正在使用 Angular 4+，那么你只需要使用 titlecase。

{{toUppercase | titlecase}}

不需要写任何管道符。

- Abhishek Ekaanth

---

这个答案不正确——问题要求将字符串的第一个字母大写，而不是每个单词的第一个字母大写。 - Alex Peters

Answer 5

一个更好的方式

app.filter('capitalize', function() {
  return function(token) {
      return token.charAt(0).toUpperCase() + token.slice(1);
   }
});

- Patrik Melander

Answer 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"。

- Ryan Crews

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

- Gregor Eesmaa

---

不幸的是，::first-letter 在 display: inline 或 display: flex 上不起作用，只能在 display:block 或 inline-block 元素上使用。 - jakub.g

Answer 8

如果你想将字符串中的每个单词都大写（例如“in progress”变成“In Progress”），你可以使用以下数组。

.filter('capitalize', function() {
    return function(input) {
        return (!!input) ? input.split(' ').map(function(wrd){return wrd.charAt(0).toUpperCase() + wrd.substr(1).toLowerCase();}).join(' ') : '';
    }
});

- Naveen raj

Answer 9

这是另一种方式：

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

- pallav deshmukh

Answer 10

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

请查看 Angular.io API 以获取完整列表。

- windmaomao

---

这是一个错误的答案——问题要求将字符串的第一个字母大写，而不是每个单词的第一个字母。 - Alex Peters