javascript - Majuscularea primei litere a unui șir în AngularJs

Vreau să fac prima literă a șirului să fie cu majusculă în AngularJS

Pe măsură ce am folosit {{ uppercase_expression | uppercase}}, acesta convertește întregul șir în majuscule.

Răspuns #1

folosește acest filtru de majuscule

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>

Răspunsul #2

Aș spune să nu folosești angular/js, deoarece poți folosi pur și simplu CSS în loc:

În CSS-ul tău, adaugă clasa:

.capitalize {
   text-transform: capitalize;
}

Apoi, pur și simplu înfășurați expresia (de ex) în HTML-ul dvs:

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

Nu este nevoie de JS ;)

Răspunsul #3

Dacă folosești Bootstrap, poți pur și simplu să adaugi clasa de ajutor text-capitalize:

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

EDIT: doar în caz că linkul moare din nou:

Transformare text

Transformați textul în componente cu clase de capitalizare a textului.

text cu litere mici.
TEXT CU LITERE MARI.
Text Cu Majuscule.

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

Observați cum text-capitalize schimbă doar prima literă din fiecare cuvânt, lăsând cazul oricărei alte litere neafectat.

Răspunsul #4

Dacă folosiți Angular 4+ atunci puteți folosi pur și simplu titlecase

{{toUppercase | titlecase}}

nu trebuie să scrii niciun țeavă.

Răspunsul #5

un mod mai plăcut

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

Răspuns #6

Îmi place răspunsul de la @TrampGuy

CSS este întotdeauna (bine, nu întotdeauna) o alegere mai bună, așa că: text-transform: capitalize; este cu siguranță calea de urmat.

Dar ce te faci dacă conținutul tău este deja tot cu majuscule? Dacă încerci text-transform: capitalize; pe un conținut precum "FOO BAR" vei obține tot "FOO BAR" în afișare. Pentru a evita această problemă, poți pune text-transform: capitalize; în CSS-ul tău, dar, de asemenea, să pui șirul de caractere cu litere mici, astfel:

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

unde folosim clasa @TrampGuy's capitalize:

.capitalize {
  text-transform: capitalize;
}

Așadar, presupunând că foo.awsome_property ar tipări în mod normal „FOO BAR”, acum va tipări „Foo Bar” dorit.

Răspunsul #7

Dacă urmărești performanța, încearcă să eviți utilizarea filtrelor AngularJS, deoarece acestea sunt aplicate de două ori pentru fiecare expresie pentru a verifica stabilitatea lor.

O metodă mai bună ar fi să folosești pseudo-elementul CSS ::first-letter cu text-transform: uppercase;. Totuși, acesta nu poate fi folosit pe elemente inline, cum ar fi span, așa că următorul lucru cel mai bun ar fi să folosești text-transform: capitalize; pe întregul bloc, ceea ce capitalizează fiecare cuvânt.

Exemplu :

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>

Răspuns #8

dacă vrei să capitalizezi fiecare cuvânt din șir (în desfășurare -> În Desfășurare), poți folosi un array astfel.

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

Răspunsul #9

Aceasta este o altă cale:

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