Großschreibung des ersten Zeichenfolgenbuchstabens in AngularJs

Ich würde sagen, verwende keine eckigen/js, da du stattdessen einfach CSS verwenden kannst:

Fügen Sie in Ihrem CSS die Klasse hinzu:

.capitalize {
   text-transform: capitalize;
}

Dann wickeln Sie einfach den Ausdruck (zum Beispiel) in Ihre HTML:

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

Keine js benötigt;)

Wenn Sie Bootstrap verwenden, können Sie einfach text-capitalize Hilfsklasse:

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

EDIT: nur für den Fall, dass der Link wieder stirbt:

Texttransformation

Transformieren Sie Text in Komponenten mit Klassen für die Großschreibung von Text.

kleinbuchstaben.
GROSSER TEXT.
CapiTaliZed Text.

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

Beachten Sie, dass durch die Verwendung von Großbuchstaben nur der erste Buchstabe jedes Wortes geändert wird, während alle anderen Buchstaben davon unberührt bleiben.

eine schönere Art und Weise

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

Wenn Sie Angular 4+ verwenden, können Sie einfach titlecase verwenden.

{{toUppercase | titlecase}}

ich muss keine Pfeifen schreiben.

Wenn Sie nach der Leistung sind, vermeiden Sie die Verwendung von AngularJS-Filtern, da diese zweimal pro Ausdruck angewendet werden, um ihre Stabilität zu überprüfen.

Ein besserer Weg wäre, ein CSS ::first-letter - Pseudoelement mit text-transform: uppercase; Zu verwenden. Dies kann jedoch nicht für Inline-Elemente wie span verwendet werden. Daher empfiehlt es sich, text-transform: capitalize; Für den gesamten Block zu verwenden, bei dem jedes Wort in Großbuchstaben geschrieben wird.

Beispiel:

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>

Ich mag die Antwort von @TrampGuy

CSS ist immer (naja, nicht immer) eine bessere Wahl, also: text-transform: capitalize; ist sicherlich der richtige Weg.

Aber was ist, wenn Ihr Inhalt zunächst nur in Großbuchstaben geschrieben ist? Wenn du es versuchst text-transform: capitalize; Bei Inhalten wie "FOO BAR" wird weiterhin "FOO BAR" angezeigt. Um dieses Problem zu umgehen, können Sie das text-transform: capitalize; in deinem CSS, aber auch in Kleinbuchstaben, also:

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

wo wir die Kapitalisierungsklasse von @ TrampGuy verwenden:

.capitalize {
  text-transform: capitalize;
}

Also, so zu tun, dass foo.awsome_property würde normalerweise "FOO BAR" drucken, es wird nun die gewünschte "Foo Bar" gedruckt.

wenn Sie jedes Wort aus einer Zeichenfolge (in Bearbeitung -> In Bearbeitung) in Großbuchstaben schreiben möchten, können Sie ein Array wie das folgende verwenden.

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

Dies ist ein anderer Weg:

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

Für Angular 2 und höher können Sie {{ abc | titlecase }}.

Überprüfen Sie Angular.io API für eine vollständige Liste.

Für den AngularJS von meanjs.org platziere ich die benutzerdefinierten Filter in modules/core/client/app/init.js

Ich brauchte einen benutzerdefinierten Filter, um jedes Wort in einem Satz groß zu schreiben.

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

}
});

Das Guthaben der Kartenfunktion geht an @Naveen raj

Wenn Sie keinen benutzerdefinierten Filter erstellen möchten, können Sie ihn direkt verwenden

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

Um meine eigene Sichtweise auf dieses Problem zu erweitern, würde ich selbst eine benutzerdefinierte Direktive verwenden.

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

Einmal deklariert, können Sie in Ihrem HTML wie folgt platzieren;

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

Wenn Sie stattdessen jedes Wort eines Satzes in Großbuchstaben schreiben möchten, können Sie diesen Code verwenden

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

und fügen Sie Ihrer Zeichenfolge-Eingabe einfach den Filter "Großschreibung" hinzu, zum Beispiel - {{Name | profitieren}}

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

Angular hat 'titlecase', das den ersten Buchstaben einer Zeichenkette großschreibt

Zum Beispiel:

envName | titlecase

wird als EnvName angezeigt

Vermeiden Sie bei der Verwendung mit Interpolation alle Leerzeichen wie

{{envName|titlecase}}

und der erste Wertbuchstabe von envName wird in Großbuchstaben gedruckt.

in Angular 4 oder CLI können Sie eine PIPE wie folgt erstellen:

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