wake-up-neo.net

Großschreibung des ersten Zeichenfolgenbuchstabens in AngularJs

Ich möchte das erste Zeichen einer Zeichenkette in eckigen Buchstaben groß schreiben

Wie ich benutzt habe {{ uppercase_expression | uppercase}} konvertiert den gesamten String in Großbuchstaben.

123
Piyush

verwenden Sie diesen Großschreibungsfilter

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

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

app.filter('capitalize', function() {
    return function(input) {
      return (angular.isString(input) && input.length > 0) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : 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 | capitalize}}</p>
    </div>
</div>
228

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

141
TrampGuy

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.

54
minimalpop

eine schönere Art und Weise

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

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

{{toUppercase | titlecase}}

ich muss keine Pfeifen schreiben.

22

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>
16
Gregor Eesmaa

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.

15
Ryan Crews

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(' ') : '';
    }
});
14
Naveen raj

Dies ist ein anderer Weg:

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

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

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

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

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

3
Maxim Mai

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

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

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

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

0
Vedha Peri

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