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

Question

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

正如我用{{ uppercase_expression | uppercase}}它将整个字符串转换为大写字母.

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

Answer 2

我会说不要使用angular/js,因为你只需使用css代替:

在你的CSS中,添加类:

.capitalize {
   text-transform: capitalize;
}

然后,只需在html中包装表达式(对于ex):

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

不需要js;)

Answer 3

如果使用Bootstrap,则只需添加text-capitalize辅助类:

<p class="text-capitalize">CapiTaliZed text.</p>

Answer 4

如果您使用的是Angular 4+,那么您可以使用 titlecase

{{toUppercase | titlecase}}

不必写任何管道.

Answer 5

一个更好的方式

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

Answer 6

我喜欢@TrampGuy的回答

CSS总是(好吧,并不总是)是一个更好的选择,所以:text-transform: capitalize;肯定是要走的路.

但是如果你的内容一开始就是大写的呢？如果你尝试text-transform: capitalize;像"FOO BAR"这样的内容,你的显示器中仍会显示"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".

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>

Answer 8

如果你想从字符串中大写每个单词(进行中 - >正在进行中),你可以像这样使用数组.

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

Answer 9

这是另一种方式:

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

Answer 10

对于Angular 2及以上,您可以使用{{ abc | titlecase }}.

检查Angular.io API以获取完整列表.

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