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

时间：2015-05-13 06:32:44

标签： javascript angularjs filter uppercase capitalize

我想在angularjs

中大写字符串的第一个字符

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

24 个答案:

答案 0 :(得分：225)

使用此大写过滤器

＆＃13;
＆＃13; 
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() : '';
    }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：139)

我说不要使用angular / js，因为你可以简单地使用css代替：

在你的CSS中，添加类：

.capitalize {
   text-transform: capitalize;
}

然后，只需在html中包装表达式（对于ex）：

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

不需要js;）

答案 2 :(得分：53)

如果您使用Bootstrap，则只需添加text-capitalize辅助类：

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

编辑：以防链接再次死亡：

  

文字转换

     

使用文本大写类转换组件中的文本。

     

小写文字。
  上传的文字。
  CapiTaliZed Text。

     
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
     

请注意text-capitalize如何仅更改每个单词的第一个字母，使任何其他字母的大小写不受影响。

答案 3 :(得分：21)

更好的方式

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

答案 4 :(得分：20)

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

{{toUppercase | titlecase}}

不必写任何管道。

答案 5 :(得分：16)

如果您正在表演，请尽量避免使用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>

答案 6 :(得分：15)

我喜欢@TrampGuy的答案

CSS总是（好吧，并不总是）是一个更好的选择，所以：text-transform: capitalize;肯定是要走的路。

但是，如果您的内容全部以大写字母开头怎么办？如果您在“FOO BAR”等内容上尝试text-transform: capitalize;，您仍会在显示屏中看到“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”。

答案 7 :(得分：13)

如果你想要从字符串中大写每个单词（正在进行中 - >正在进行中），你可以使用这样的数组。

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

答案 8 :(得分：8)

对于Angular 2及以上版本，您可以使用{{ abc | titlecase }}。

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

答案 9 :(得分：8)

这是另一种方式：

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

答案 10 :(得分：7)

＆＃13;
＆＃13; 
.capitalize {
  display: inline-block;
}

.capitalize:first-letter {
  font-size: 2em;
  text-transform: capitalize;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 11 :(得分：3)

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

中

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

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

}
});

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

答案 12 :(得分：3)

在内置pipe的Angle 7+中

{{ yourText | titlecase  }}

答案 13 :(得分：2)

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

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

答案 14 :(得分：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>

答案 15 :(得分：1)

相反，如果您想要将句子中的每个单词大写，那么您可以使用此代码

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

只需添加过滤器＆＃34;大写＆＃34;对于你的字符串输入，对于ex - {{name |利用}}

答案 16 :(得分：1)

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

答案 17 :(得分：0)

您可以尝试将String分成两部分，并分别管理其大小写。

{{ (Name.charAt(0) | uppercase) + "" + (Name.slice(1, element.length) | lowercase) }}

或

{{ Name.charAt(0) | uppercase }} {{ Name.slice(1, element.length) | lowercase  }}

答案 18 :(得分：0)

添加到Nidhish的答案中，

对于正在使用AngularJ并希望大写字符串中每个单词的每个单词的第一个字母的人，请使用以下代码：

var app = angular.module('app', []);

app.controller('Ctrl', function ($scope) {
   $scope.msg = 'hello, world.';
});

app.filter('titlecase', function() {
    return function(input) {
      //Check for valid string
      if(angular.isString(input) && input.length > 0) {
        var inputArray = input.split(' ');
        for(var i=0; i<inputArray.length; i++) {
          var value = inputArray[i];
          inputArray[i] =  value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
        }
        return inputArray.join(' ');
      } else {
        return 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 | titlecase}}</p>
    </div>
</div>

答案 19 :(得分：0)

if (value){
  value = (value.length > 1) ? value[0].toUpperCase() + value.substr(1).toLowerCase() : value.toUpperCase();
}

答案 20 :(得分：0)

Angular具有“ titlecase”，可将字符串中的第一个字母大写

例如：

envName | titlecase

将显示为EnvName

与插值一起使用时，请避免所有空格

{{envName|titlecase}}

，envName的首个字母将以大写字母打印。

答案 21 :(得分：0)

在Angular 4或CLI中，你可以像这样创建一个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;
  }
}

答案 22 :(得分：-1)

{{ uppercase_expression | capitaliseFirst}}应该有效

答案 23 :(得分：-1)

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

<td>{{lastName.charAt(0).toUpperCase()+ lastName.substr(1).toLowerCase()}}</td>
相关问题
最新问题