Comment mettre en majuscule la première lettre de chaque mot lié via ng-model ?

Question

J'ai une api qui renvoie du json que je lie à des éléments de formulaire via un modèle ng.

les données renvoyées par l'api sont en majuscules, comment puis-je appliquer un filtre / css ? pour que chaque première lettre de tous les mots soit en majuscule.

<input type = text ng-model = string>

il faut que cette chaîne soit liée à la valeur (obtenue via l'API) dans le contrôleur pour qu'elle soit en mode camel.

Answer 1

Utilisez l'outil angulaire lowercase et ensuite transformer le texte avec css.

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

app.controller('myCtrl', function($scope) {
  $scope.string = 'LOREM IPSUM DOLOR SIT AMET, DUIS VIDIT DEFINITIONES MEL NE'
});

input {
  text-transform: capitalize;
  padding:10px;
}

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app=myApp ng-controller=myCtrl>
  <input type=text ng-model="string | lowercase" >
</div>

Answer 2

Vous pouvez utiliser cette solution.

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

La vue doit être comme ceci

<p><b>My Text:</b> {{msg | capitalize}}</p>

Answer 3

Vous pouvez utiliser une solution JavaScript classique :

function capitalize(str){
    if(!str || typeof str !== 'string')
        return ""

    var newString = str; 
    var firstLetter = str[0];
    newString = newString.toLowerCase().slice(1, newString.length);

    return [firstLetter, newString].join('');
}

Sinon, vous pouvez utiliser un filtre AngularJS

angular
    .module('app')
    .filter('capitalize', capitalize)

Où capitalize est la même fonction que celle que j'ai écrite ci-dessus. Cela vous donne la possibilité de l'utiliser directement dans la vue :

<span>{{::vm.value | capitalize}}</span>