Capitalize den ersten Buchstaben der Zeichenfolge in AngularJS

Question

ich erste Zeichen der Zeichenkette in AngularJS

nutzen möchten Wie ich {{ uppercase_expression | uppercase}} verwendet es ganze String in Großbuchstaben umwandeln.

Answer 1

Verwendung dieses kapitalisieren Filter

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>

Answer 2

eine schönere Art und Weise

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

Answer 3

, wenn Sie jedes Wort aus Zeichenfolge nutzen wollen (in progress -> In Progress) können Sie benutze ein Array wie dieses.

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

Answer 4

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

ich einen benutzerdefinierten Filter benötigt, um jedes Wort in einem Satz zu nutzen, ist hier, wie ich so:

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

} 
}); 

der Kredit der Karte Funktion geht raj

Answer 5

@Naveen Wenn Sie nach Leistung sind, versuchen Sie es mit AngularJS Filter zu vermeiden, da sie für jeden expre zweimal angewendet werden um nach ihrer Stabilität zu suchen.

Ein besserer Weg wäre die Verwendung von CSS ::first-letter Pseudo-Element mit text-transform: uppercase;. Das kann jedoch nicht für Inline-Elemente wie span verwendet werden, also wäre die nächste beste Sache, text-transform: capitalize; für den ganzen 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>

Answer 6

Nur meine eigenen Gedanken über dieses Thema zu schreiben, würde ich eine benutzerdefinierte mich Richtlinie;

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

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

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

Answer 7

Ich benutze keine Winkel/js sagen würde, wie Sie einfach CSS stattdessen verwenden können:

in Ihrem CSS, fügen Sie die Klasse:

.capitalize { 
    text-transform: capitalize; 
} 

Dann wickeln einfach die Ausdruck (zB) in Ihrem html:

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

Keine js benötigt;)

Answer 8

Ich mag die Antwort von @TrampGuy

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

Aber was ist, wenn Ihr Inhalt nur aus Großbuchstaben besteht? Wenn Sie text-transform: capitalize; auf Inhalt wie "FOO BAR" versuchen, erhalten Sie immer noch "FOO BAR" in Ihrem Display. Um das zu umgehen diese Frage könnten Sie die text-transform: capitalize; in Ihrem CSS setzen, sondern auch Ihre Zeichenfolge klein geschrieben, so:

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

wo wir verwenden @ TrampGuy der kapitalisieren Klasse:

.capitalize { 
    text-transform: capitalize; 
} 

So vorgibt, dass foo.awsome_property würde normalerweise "FOO BAR" drucken, wird jetzt die gewünschte "Foo Bar" gedruckt.

Answer 9

Stattdessen, wenn Sie jedes Wort eines Satzes profitieren wollen, dann 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 nur Filter hinzufügen „kapitalisieren“, um Ihre String-Eingang, für die Ex - {{name | kapitalisieren}}

Answer 10

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

Answer 11

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

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

Answer 12

Wenn Sie benutzerdefinierte Filter nicht wollen, bauen, dann können Sie verwenden Sie direkt

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

Answer 13

Sie hinzufügen können Funktionalität Laufzeit nutzen wie:

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

Answer 14

{{ uppercase_expression | capitaliseFirst}}

Answer 15

in Angular 4 oder CLI arbeiten sollten 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; 
    } 
} 

Answer 16

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

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

Answer 17

Dies ist ein weiterer Weg:

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

Answer 18

var app = angular.module("app", []); 
app.filter('capitalize', function() { 
    return function(str) { 
     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; 
    } 
}); 

Answer 19

Wenn Sie Angular 4 verwenden, dann können Sie nur titlecase

{{toUppercase | titlecase}} 

haben keine Leitungen schreiben verwenden.