首字母大写的字串在英语中

I want capitalize first character of string in angularjs

我想要用盎格鲁人的首字母大写

As i used {{ uppercase_expression | uppercase}} it convert whole string to upper case.

当我使用{{{{}{{{}{{{}}{{{{}}}}}}{{{}}}}}}{{{}}}}}}表达式|}}}它将整个字符串转换为大写。

19 个解决方案

#1

use this capitalize 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>

#2

I'd say don't use angular/js as you can simply use css instead:

我要说的是不要使用角度/js，因为你可以简单地使用css:

In your css, add the class:

在css中，添加类:

.capitalize {
   text-transform: capitalize;
}

Then, simply wrap the expression (for ex) in your html:

然后，将表达式(for ex)封装在html中:

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

No js needed ;)

不需要js;)

#3

If you use Bootstrap, you can simply add the text-capitalize helper class:

如果您使用Bootstrap，您可以简单地添加text- capitalhelper类:

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

#4

a nicer way

更好的方式

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

#5

If you are after performance, try to avoid using AngularJS filters as they are applied twice per each expression to check for their stability.

如果您追求性能，请尽量避免使用AngularJS过滤器，因为每个表达式都要应用两次，以检查它们的稳定性。

A better way would be to use CSS ::first-letter pseudo-element with text-transform: uppercase;. That can't be used on inline elements such as span, though, so the next best thing would be to use text-transform: capitalize; on the whole block, which capitalizes every word.

更好的方法是使用CSS:::带有文本转换:大写的伪元素;但是，这不能用于像span这样的内联元素，所以下一个最好的方法是使用text-transform:大写;整个街区，每个字都大写。

Example:

例子:

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>

#6

I like the answer from @TrampGuy

我喜欢@TrampGuy的回答

CSS is always (well, not always) a better choice, so: text-transform: capitalize; is certainly the way to go.

CSS总是更好的选择，所以:text-transform:大写;这当然是正确的。

But what if your content is all uppercase to begin with? If you try text-transform: capitalize; on content like "FOO BAR" you'll still get "FOO BAR" in your display. To get around that issue you could put the text-transform: capitalize; in your css, but also lowercase your string, so:

但是如果你的内容都是大写的呢?如果你尝试文本转换:大写;在像“FOO BAR”这样的内容上，你仍然会在你的显示中得到“FOO BAR”。为了解决这个问题，你可以使用文本转换:大写;在你的css中，也是小写的字符串，所以:

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

where we are using @TrampGuy's capitalize class:

我们使用@TrampGuy的大写类:

.capitalize {
  text-transform: capitalize;
}

So, pretending that foo.awsome_property would normally print "FOO BAR", it will now print the desired "Foo Bar".

所以,假装foo。awsome_property通常会打印“FOO BAR”，现在会打印所需的“FOO BAR”。

#7

if you want capitalize each word from string (in progress -> In Progress), you can use array like this.

如果您希望对字符串中的每个单词进行大写(正在进行中——>正在进行中)，您可以使用这样的数组。

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

#8

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

#9

For Angular 2 and up, you can use {{ abc | titlecase }}.

对于角度为2和向上，可以使用{abc | titlecase}}。

Check Angular.io API for complete list.

检查角。完整列表的io API。

#10

This is another way:

这是另一种方式:

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

#11

For the AngularJS from meanjs.org, I place the custom filters in modules/core/client/app/init.js

对于来自meanjs.org的AngularJS，我将自定义过滤器放在模块/core/client/app/init.js中

I needed a custom filter to capitalize each word in a sentence, here is how I do so:

我需要一个自定义过滤器来将一个句子中的每个词大写，我是这样做的:

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

}
});

The credit of the map function goes to @Naveen raj

地图功能的功劳归于@Naveen raj。

#12

If you are using Angular 4 then you can just use titlecase

如果你用的是角4，那么你可以用titlecase

{{toUppercase | titlecase}}

don't have to write any pipes.

不用写任何管道。

#13

If you don't want to build custom filter then you can use directly

如果您不想构建自定义过滤器，那么您可以直接使用

{{ foo.awesome_property.substring(0,1) | uppercase}}{{foo.awesome_property.substring(1)}}

#14

Just to add my own take on this issue, I would use a custom directive myself;

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

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;
        });
    }
};

Once declared you can place inside your Html as below;

一旦声明，您可以放置在您的Html如下;

<input ng-model="surname" ng-trim="false" capitalization>

#15

Instead if you want to capitalize each word of a sentence then you can use this code

相反，如果你想大写一个句子的每个单词，你可以使用这个代码

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

and just add filter "capitalize" to your string input, for ex - {{name | capitalize}}

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

#16

in Angular 4 or CLI you can create a PIPE like this:

在角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;
  }
}

#17

var app = angular.module("app", []);
app.filter('capitalize', function() {
    return function(str) {
        str = str.toLowerCase().split(" ");
        var c = '';
        for (var i = 0; i <= (str.length - 1); i++) {
            var word = ' ';
            for (var j = 0; j < str[i].length; j++) {
                c = str[i][j];
                if (j === 0) {
                    c = c.toUpperCase();
                }
                word += c;
            }
            str[i] = word;
        }
        str = str.join('');
        return str;
    }
});

#18

You can add capitalize functionality run time as:

您可以添加大写功能运行时间如下:

<td>{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}</td>

#19

{{ uppercase_expression | capitaliseFirst}} should work

{{{{upper - case_expression | capitaliseFirst}}应该可以工作