Großschreiben Sie den ersten Buchstaben der Zeichenfolge in AngularJs

134

Ich möchte das erste Zeichen der Zeichenfolge in Angularjs groß schreiben

Wie ich es benutzt {{ uppercase_expression | uppercase}}habe, konvertiere ich den ganzen String in Großbuchstaben.

Piyush
quelle
1
Ja, Sie müssen Code schreiben. Angular wird nicht alles für Sie tun . developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… , developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
JB Nizet
11
Dies kann auch mit CSS erfolgen. Schauen Sie sich die Texttransformation an: Capitalize Property
Ramanathan Muthuraman
1
Sie können diese Lösung verwenden, wenn Sie wirklich eckig verwenden möchten: codepen.io/WinterJoey/pen/sfFaK
Yousef_Shamshoum
1
Erstellen Sie eine einfache Direktive / Filter, die den ersten Buchstaben des
Wortkapitals

Antworten:

234

Verwenden Sie diesen Großschreibfilter

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>

Nidhish Krishnan
quelle
11
Sie erhalten eine Fehlermeldung, wenn Sie versehentlich eine Zahl groß schreiben möchten. Der Hauptteil der Funktion sollte folgender sein : return (angular.isString(s) && s.length > 0) ? s[0].toUpperCase() + s.substr(1).toLowerCase() : s;. Wenn es sich nicht um eine Zeichenfolge handelt, geben Sie sie unverändert zurück.
Jabba
2
Hier ist der benutzerdefinierte Großschreibung Filter codepen.io/WinterJoey/pen/sfFaK
Michal
148

Ich würde sagen, verwenden Sie nicht angle / js, da Sie stattdessen einfach css verwenden können:

Fügen Sie in Ihrem CSS die Klasse hinzu:

.capitalize {
   text-transform: capitalize;
}

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

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

Keine js benötigt;)

TrampGuy
quelle
7
Diese Transformation wird den ersten Buchstaben jedes Wortes
groß schreiben und
22
@ jakub.g Wenn Sie nur das erste Wort (also den Buchstaben) groß schreiben möchten, erweitern Sie einfach den CSS-Selektor mit dem Pseudoelement :first-letter-Selektor. Sonst noch etwas offen? :)
Philzen
2
@Philzen Ja! Wie würden Sie es nur mit HTML machen? ;-)
Romain Vincent
@RomainVincent Was meinst du mit "nur HTML"? Vielleicht hilft meine Antwort unten (klicken Sie einfach auf "Code-Snippet ausführen", um es in Aktion zu sehen). HTML-Inhalt ist statisch. Sie müssen mindestens CSS oder JS einfügen, um das Design bzw. den DOM-Inhalt zu ändern.
Philzen
4
Es tut mir leid, das war ein schlechter Versuch, einen Witz zu machen.
Romain Vincent
57

Wenn Sie Bootstrap verwenden , können Sie einfach die text-capitalizeHilfsklasse hinzufügen :

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

Text in Kleinbuchstaben.
UPPERCASED 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 Großschreibung von Text nur der erste Buchstabe jedes Wortes geändert wird und andere Großbuchstaben davon nicht betroffen sind.

Minimalpop
quelle
Schneller und einfacher Weg, um das Ziel zu erreichen. Außerdem wird der erste Buchstabe jedes Wortes in der Zeichenfolge groß geschrieben, was cool ist.
Kisanme
hinter den Kulissen verwendet dies nurtext-transform: capitalize;
Cameck
27

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

{{toUppercase | titlecase}}

Ich muss keine Pfeifen schreiben.

Abhishek Ekaanth
quelle
4
Dies ist eine falsche Antwort. Bei der Frage wird der erste Buchstabe der Zeichenfolge groß geschrieben, nicht der erste Buchstabe jedes Wortes.
Alex Peters
23

ein schöner Weg

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

Wenn Sie nach der Leistung suchen, 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 die Verwendung von CSS ::first-letter-Pseudoelementen mit text-transform: uppercase;. Dies kann jedoch nicht für Inline-Elemente wie verwendet spanwerden. Das nächstbeste wäre daher, text-transform: capitalize;den gesamten Block zu verwenden, der jedes Wort groß schreibt.

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>

Gregor Eesmaa
quelle
1
Funktioniert leider ::first-letternicht an display: inlineoder display: flex, nur an display:blockoder inline-blockElementen
jakub.g
18

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 Sie text-transform: capitalize;Inhalte wie "FOO BAR" anprobieren , wird weiterhin "FOO BAR" in Ihrem Display angezeigt. Um dieses Problem zu text-transform: capitalize;umgehen, können Sie das in Ihr CSS einfügen, aber auch Ihren String in Kleinbuchstaben schreiben.

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

wo wir die Kapitalisierungsklasse von @ TrampGuy verwenden:

.capitalize {
  text-transform: capitalize;
}

Wenn Sie also so tun, als foo.awsome_propertywürde normalerweise "FOO BAR" gedruckt, wird jetzt die gewünschte "Foo Bar" gedruckt.

Ryan Crews
quelle
14

Wenn Sie jedes Wort aus einer Zeichenfolge großschreiben möchten (in Bearbeitung -> In Bearbeitung), können Sie ein Array wie dieses verwenden.

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

Dies ist ein anderer Weg:

{{some_str | limitTo:1 | uppercase}}{{some_str.substr(1) | lowercase }}
Pallav Deshmukh
quelle
9

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

Überprüfen Sie die Angular.io-API auf eine vollständige Liste.

Windmaomao
quelle
1
Dies ist eine falsche Antwort. Bei der Frage wird der erste Buchstabe der Zeichenfolge groß geschrieben, nicht der erste Buchstabe jedes Wortes.
Alex Peters
7

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

Philzen
quelle
3

Für das 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. So mache ich das:

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

Maxim Mai
quelle
3

In eckigem 7+ mit eingebautem Rohr

{{ yourText | titlecase  }}
Ahmad Sharif
quelle
2

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

{{ foo.awesome_property.substring(0,1) | uppercase}}{{foo.awesome_property.substring(1)}}
Chhitij Srivastava
quelle
2
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;
    }
});
murali2486
quelle
2
Während dieses Code-Snippet die Lösung sein kann, hilft das Hinzufügen einer Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
Friedenstyp
1

Um meine eigene Meinung zu diesem Thema hinzuzufügen, 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 wie folgt in Ihr HTML einfügen.

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

Wenn Sie stattdessen jedes Wort eines Satzes groß 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 einfach den Filter "großschreiben" zu Ihrer Zeichenfolgeneingabe hinzu, z. B. - {{name | profitieren}}

Akash Saxena
quelle
0

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

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

Zum Beispiel:

envName | titlecase

wird als EnvName angezeigt

Vermeiden Sie bei Verwendung mit Interpolation alle Leerzeichen wie

{{envName|titlecase}}

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

Vedha Peri
quelle
1
Dies liefert keinen Wert für die obige Antwort
Ivan Kaloyanov
1
Dies ist eine falsche Antwort. Bei der Frage wird der erste Buchstabe der Zeichenfolge groß geschrieben, nicht der erste Buchstabe jedes Wortes.
Alex Peters
0
if (value){
  value = (value.length > 1) ? value[0].toUpperCase() + value.substr(1).toLowerCase() : value.toUpperCase();
}
Ali
quelle
-1

Sie können die Laufzeit der Groß- und Kleinschreibung wie folgt hinzufügen:

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

{{ uppercase_expression | capitaliseFirst}} sollte arbeiten

Hasan Shaik
quelle
-2

Zu Nidhishs Antwort hinzufügen:

Verwenden Sie für Personen, die AngularJs verwenden und den ersten Buchstaben jedes Wortes in der Zeichenfolge groß schreiben möchten , den folgenden Code:

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>

Pankaj
quelle