在AngularJs中大写字母的第一个字母
我想在angularjs中大写string的第一个字符
正如我使用{{ uppercase_expression | uppercase}} {{ uppercase_expression | uppercase}}它将整个string转换为大写。
使用这个大写filter
var app = angular.module('app', []); app.controller('Ctrl', function ($scope) { $scope.msg = 'hello, world.'; }); app.filter('capitalize', function() { return function(input) { return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : ''; } });
<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>
我会说，不要使用angular / js，因为你可以简单地使用css来代替：
在你的CSS中，添加类：
.capitalize { text-transform: capitalize; }
然后，只需将expression式（用于ex）包装在您的html中：
<span class="capitalize">{{ uppercase_expression }}</span>
没有js需要;）
如果您使用Bootstrap ，则可以简单地添加text-capitalize助手类：
<p class="text-capitalize">CapiTaliZed text.</p>
一个更好的方法
app.filter('capitalize', function() { return function(token) { return token.charAt(0).toUpperCase() + token.slice(1); } });
如果你想从string（进行中 – >正在进行）大写每个单词，你可以像这样使用数组。
.filter('capitalize', function() { return function(input) { return (!!input) ? input.split(' ').map(function(wrd){return wrd.charAt(0).toUpperCase() + wrd.substr(1).toLowerCase();}).join(' ') : ''; } });
如果你是在性能之后，尽量避免使用AngularJSfilter，因为它们每个expression式应用两次来检查它们的稳定性。
更好的方法是使用带有text-transform: uppercase; CSS ::first-letter伪元素text-transform: uppercase; 。 尽pipe如此，不能用于内联元素，所以下一个最好的做法是使用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>
我喜欢@TrampGuy的答案
CSS总是（并不总是）更好的select，所以： text-transform: capitalize; 肯定是要走的路。
但是如果你的内容全部是大写字母呢？ 如果你尝试text-transform: capitalize; 在像“FOO BAR”这样的内容上，您仍然会在显示屏上看到“FOO BAR”。 为了解决这个问题，你可以把text-transform: capitalize; 在你的CSS，但也小写你的string，所以：
<ul> <li class="capitalize">{{ foo.awesome_property | lowercase }}</li> </ul>
我们正在使用@ TrampGuy的大写课程：
.capitalize { text-transform: capitalize; }
所以，假装foo.awsome_property通常会打印“FOO BAR”，它现在将打印所需的“Foo Bar”。
.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>
对于Angular 2和更高版本，可以使用{{ abc | titlecase }} {{ abc | titlecase }} 。
检查Angular.io API的完整列表。
对于来自meanjs.org的AngularJS，我将自定义filter放置在modules/core/client/app/init.js
我需要一个自定义filter来大写每个单词的句子，下面是我如何做到这一点：
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(" "); } });
地图function的功劳归于@Naveen raj
如果您不想构build自定义filter，则可以直接使用
{{ foo.awesome_property.substring(0,1) | uppercase}}{{foo.awesome_property.substring(1)}}
为了增加我自己的看法，我会自己使用一个自定义指令;
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>
相反，如果你想大写一个句子的每个单词，那么你可以使用这个代码
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(' '); } });
只需要添加filter“大写”到您的stringinput，为前 – {{name | 利用}}
您可以将大写function运行时添加为：
<td>{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}</td>
在Angular 4或CLI中，你可以创build一个像这样的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; } }
这是另一种方式：
{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}
{{ uppercase_expression | capitaliseFirst}} {{ uppercase_expression | capitaliseFirst}}应该工作
