在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}}应该工作