Comment autocapitaliser un champ de saisie?

Question

Comment à autocapitalize le premier caractère d’un champ de saisie à l’intérieur d’une AngularJS forme élément ?

J’ai vu la solution jQuery déjà, mais pense que cela doit être fait différemment dans AngularJS en utilisant une directive.

Answer 1

Oui, vous devez définir une directive et définir votre propre fonction d'analyse:

 myApp.directive('capitalizeFirst', function($parse) {
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
           if (inputValue === undefined) { inputValue = ''; }
           var capitalized = inputValue.charAt(0).toUpperCase() +
                             inputValue.substring(1);
           if(capitalized !== inputValue) {
              modelCtrl.$setViewValue(capitalized);
              modelCtrl.$render();
            }         
            return capitalized;
         }
         modelCtrl.$parsers.push(capitalize);
         capitalize($parse(attrs.ngModel)(scope)); // capitalize initial value
     }
   };
});
 

HTML:

 <input type="text" ng-model="obj.name" capitalize-first>
 

Violon

Answer 2

S'il vous plaît rappelez-vous que tout n'a pas besoin d'une solution angulaire. Vous voyez cela souvent avec la foule de jQuery; ils aiment utiliser des fonctions jQuery coûteuses pour faire des choses plus simples ou plus faciles à faire avec du javascript pur.

Donc, bien que vous ayez très bien besoin d’une fonction de capitalisation et que les réponses précédentes donnent cela, il sera beaucoup plus efficace d’utiliser simplement la règle css "text-transform: capitalize"

 <tr ng-repeat="(key, value) in item">
    <td style="text-transform: capitalize">{{key}}</td>
    <td>{{item}}</td>
</tr>
 

Answer 3

Vous pouvez créer un filtre personnalisé 'capitalize' et l'appliquer à la chaîne de votre choix:

  <div ng-controller="MyCtrl">
     {{aString | capitalize}} !
</div>
 

Code JavaScript pour le filtre:

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

myApp.filter('capitalize', function() {
    return function(input, scope) {
        return input.substring(0,1).toUpperCase()+input.substring(1);
    }
});
 

Answer 4

Utiliser les CSS : première lettre pseudo-classe.

Vous devez mettre tout en minuscule et après appliquer la majuscule uniquement à la première lettre

Voici un exemple : http://jsfiddle.net/AlexCode/xu24h/

Answer 5

Modifié son code pour mettre en majuscule chaque premier caractère du mot. Si vous donnez ' John Doe ', le résultat est ' John Doe '

 myApp.directive('capitalizeFirst', function() {
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
           var capitalized = inputValue.split(' ').reduce(function(prevValue, word){
            return  prevValue + word.substring(0, 1).toUpperCase() + word.substring(1) + ' ';
        }, '');
           if(capitalized !== inputValue) {
              modelCtrl.$setViewValue(capitalized);
              modelCtrl.$render();
            }         
            return capitalized;
         }
         modelCtrl.$parsers.push(capitalize);
         capitalize(scope[attrs.ngModel]);  // capitalize initial value
     }
   };
});