web-dev-qa-db-ja.com

AngularJの文字列の最初の文字を大文字にする

Angularjsで文字列の最初の文字を大文字にしたい

{{ uppercase_expression | uppercase}}を使ったので、文字列全体を大文字に変換します。

javascriptangularjsfilteruppercasecapitalize
123
Piyush

この大文字フィルタを使う

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>
225
Nidhish Krishnan

単純にcssを使うことができるので、Angular/jsは使わないでください。

あなたのCSSに、クラスを追加します。

.capitalize {
   text-transform: capitalize;
}

それから、（exのための）式をあなたのhtmlにラップするだけです。

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

Jsは必要ありません;）

141
TrampGuy

ブートストラップ を使用する場合は、 text-capitalize ヘルパークラスを追加するだけです。

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

編集：念のためにリンクが再び死ぬ：

テキスト変換

テキスト大文字化クラスを使用して、コンポーネント内のテキストを変換します。

小文字のテキスト.
大文字のテキスト。
大文字のテキスト。

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

Text-capitalizeは各Wordの最初の文字だけを変更し、他の文字の大文字と小文字は区別しないことに注意してください。

54
minimalpop

よりよい方法

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

あなたがAngular 4+を使っているならば、あなたはただtitlecaseを使うことができます

{{toUppercase | titlecase}}

パイプを書く必要はありません。

21
Abhishek Ekaanth

あなたがパフォーマンスの後であるならば、それらが安定性をチェックするためにそれらが各表現につき2回適用されるのでAngularJSフィルタを使用することを避けるようにしてください。

もっと良い方法はCSSの::first-letter擬似要素をtext-transform: uppercase;と一緒に使うことでしょう。ただし、spanなどのインライン要素には使用できません。そのため、次の最良の方法は、すべてのWordを大文字にするブロック全体で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>
16
Gregor Eesmaa

私は@TrampGuyからの回答が好きです

CSSは常に（もちろん、常にではない）より良い選択です。そのためtext-transform: capitalize;が確実に有効な方法です。

しかし、あなたのコンテンツがすべて大文字で始まるとしたらどうでしょうか。 "FOO BAR"のようなコンテンツでtext-transform: capitalize;を試しても、ディスプレイには "FOO BAR"が表示されます。この問題を回避するには、あなたのCSSにtext-transform: capitalize;を入れることができますが、あなたの文字列を小文字にすることもできます。

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

@ TrampGuyの大文字クラスを使用しています。

.capitalize {
  text-transform: capitalize;
}

そのため、foo.awsome_propertyが通常は "FOO BAR"を印刷するように装って、目的の "Foo Bar"を印刷します。

15
Ryan Crews

各Wordを文字列から大文字にする（進行中 - >進行中）場合は、次のように配列を使用できます。

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

Angular 2以上の場合は、{{ abc | titlecase }}を使用できます。

完全なリストについては Angular.io API を確認してください。

8
windmaomao

これは別の方法です。

{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}
8
pallav deshmukh
.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>
7
Philzen

Meanjs.orgのAngularJSでは、カスタムフィルタをmodules/core/client/app/init.jsに配置します。

文中の各Wordを大文字にするためのカスタムフィルタが必要でした。

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

}
});

Map関数の名誉は@Naveen rajにあります

3
Maxim Mai

カスタムフィルタを構築したくない場合は、直接使用できます。

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

この問題について私自身の見方を加えるために、私は自分自身でカスタムディレクティブを使用します。

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>
1
uk2k05

代わりにあなたが文の各Wordを大文字にしたいなら、あなたはこのコードを使うことができます

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"を追加するだけです。大文字にする}}

1
Akash Saxena
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
murali2486

Angularには、文字列の最初の文字を大文字にする「titlecase」があります。

例：

envName | titlecase

envNameとして表示されます

内挿と一緒に使用する場合は、次のようにすべてのスペースを避けてください。

{{envName|titlecase}}

envNameの値の最初の文字は大文字で印刷されます。

0
Vedha Peri

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;
  }
}
0
eberlast