关于javascript:angularJS中字符串的第一个字母大写


Capitalize the first letter of string in AngularJs

我要把安古拉语系中的第一个字符串大写

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

相关讨论

使用此大写筛选器

1
2
3
4
5
6
7
8
9
10
11
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() : '';
    }
});
1
2
3
4
5
6
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">

   
        <p>
My Text: {{msg | capitalize}}
</p>

相关讨论

我想说，不要使用angular/js，因为您可以简单地使用css：

在CSS中，添加类：

1
2
3
.capitalize {
   text-transform: capitalize;
}

然后，只需将表达式(for ex)包装在HTML中：

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

不需要JS；

相关讨论

如果使用bootstrap，只需添加text-capitalizehelper类：

1
2
<p class="text-capitalize">CapiTaliZed text.
</p>
相关讨论

更好的方法

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

如果你使用角4+，那么你可以只使用titlecase。

1
{{toUppercase | titlecase}}

不用写任何管道。

相关讨论

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

更好的方法是将css ::first-letter伪元素与text-transform: uppercase;一起使用。但是，它不能用于内联元素，如span，因此，下一个最好的方法是在整个块上使用text-transform: capitalize;，它将每个单词大写。

例子：

1
2
3
4
5
var app = angular.module('app', []);

app.controller('Ctrl', function ($scope) {
   $scope.msg = 'hello, world.';
});
1
2
3
4
5
6
7
8
9
10
11
.capitalize {
  display: inline-block;  
}

.capitalize::first-letter {
  text-transform: uppercase;
}

.capitalize2 {
  text-transform: capitalize;
}
1
2
3
4
5
6
7
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">

   
        My text: {{msg}}
        <p>
My text: <span class="capitalize2">{{msg}}</span>
</p>

相关讨论

我喜欢@Trampguy的回答

CSS总是(好的，不总是)一个更好的选择，所以：text-transform: capitalize;当然是一个不错的选择。

但如果你的内容都是大写的呢？如果你在诸如"foo bar"之类的内容上尝试text-transform: capitalize;，你的显示器上仍然会显示"foo bar"。为了解决这个问题，您可以将text-transform: capitalize;放在CSS中，但也可以将字符串小写，因此：

1
2
3
4
5
6
7
<ul>

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


</ul>

我们使用的是@Trampguy的资本化类：

1
2
3
.capitalize {
  text-transform: capitalize;
}

因此，假设foo.awsome_property通常打印"foo bar"，它现在将打印所需的"foo bar"。

如果要将字符串中的每个单词大写(进行中->进行中)，可以使用类似这样的数组。

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

1
2
3
4
5
6
7
8
.capitalize {
  display: inline-block;
}

.capitalize:first-letter {
  font-size: 2em;
  text-transform: capitalize;
}
1
2
3
<span class="capitalize">
  really, once upon a time there was a badly formatted output coming from my backend, all completely in lowercase and thus not quite as fancy-looking as could be - but then cascading style sheets (which we all know are awesome) with modern pseudo selectors came around to the rescue...
</span>

对于角2及以上，可以使用{{ abc | titlecase }}。

检查angular.io api以获取完整列表。

相关讨论

这是另一种方式：

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

对于meanjs.org中的angularjs，我将自定义过滤器放在modules/core/client/app/init.js中。

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

1
2
3
4
5
6
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("");

}
});

地图功能归功于@naven raj

如果不想构建自定义筛选器，则可以直接使用

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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中，如下所示：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var app = angular.module("app", []);
app.filter('capitalize', function() {
    return function(str) {
        if (str === undefined) return; // avoid undefined
        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;
    }
});
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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(' ');
  }
});

只需将过滤器"capitalize"添加到字符串输入中，例如name capitalize

Angular有"TitleCase"，它将字符串中的第一个字母大写。

对于EX：

1
envName | titlecase

将显示为envname

当与插值一起使用时，请避免像

1
{{envName|titlecase}}

envname值的第一个字母将以大写形式打印。

相关讨论

在Angular 4或CLI中，可以创建这样的管道：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;
  }
}

您可以添加大写功能运行时为：

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

{{ uppercase_expression | capitaliseFirst}}应该工作