angularjs force majuscules dans la zone de texte

Veuillez voir la réponse ci-dessous, qui est supérieure à celle-ci.

cette réponse est fondée sur la réponse ici: Comment autocapitalize le premier caractère dans un champ de saisie dans AngularJS?.

J'imagine que ce que vous voulez serait un analyseur de fonction comme ceci:

JS:

angular
  .module('myApp', [])
  .directive('capitalize', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
          if (inputValue == undefined) inputValue = '';
          var capitalized = inputValue.toUpperCase();
          if (capitalized !== inputValue) {
            //see where the cursor is before the update so that we can set it back
            var selection = element[0].selectionStart;
            modelCtrl.$setViewValue(capitalized);
            modelCtrl.$render();
            //set back the cursor after rendering
            element[0].selectionStart = selection;
            element[0].selectionEnd = selection;
          }
          return capitalized;
        }
        modelCtrl.$parsers.push(capitalize);
        capitalize(scope[attrs.ngModel]); //capitalize initial value
      }
    };
  });

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <input type="text" ng-model="name" capitalize>
</div>

L'idée est de montrer (pas de transformation), la chaîne en majuscules à côté client et de la transformer en majuscules à côté serveur (les utilisateurs peuvent toujours contrôler ce qui se passe à côté client). Donc:

1) dans le code html:

<input id="test" type="text" ng-model="test">

ici pas de majuscules transformation.

2) dans le css:

#test {text-transform: uppercase;}

de données est indiqué en majuscules, mais, en fait, toujours en minuscules, si l'utilisateur a tapé en minuscules.
3) mettez la chaîne en majuscules à côté serveur lors de l'insertion en base de données.

= = = = =
pour jouer, vous pouvez essayer de suivre:

<input type="text" ng-model="test" ng-change="test=test.toUpperCase();">
<input type="text" ng-model="test" ng-blur="test=test.toUpperCase();">

mais je pense que ng-modification ou ng-flou moyens ne sont pas nécessaires pour votre cas.

Lorsqu'il est utilisé avec Bootstrap, il suffit d'ajouter text-uppercase à l'entrée de l'attribut de classe.

Cela ne fonctionnera pas du tout.

ng-model pour préciser le champ de la propriété du champ d'application devrait être lié au modèle. Aussi, ng-model ne pas accepter une expression comme valeur. Expressions dans angular.js sont des choses entre {{ et }}.

La uppercase filtre utilisé dans la production et partout où les expressions sont autorisés.

Vous ne pouvez pas faire ce que vous voulez faire, mais vous pouvez utiliser le CSS, text-transform au moins à l'écran tout en majuscules.

Si vous voulez avoir la valeur d'un champ de texte en majuscules, vous pouvez obtenir un peu de JavaScript personnalisé.

Dans votre contrôleur:

$scope.$watch('test', function(newValue, oldValue) {
  $scope.$apply(function() {
    $scope.test = newValue.toUpperCase();
  }
});

Lors de l'utilisation de bootstrap:

Première approche: à l'Aide de texte de la classe-les majuscules

<input  type="text" class="text-uppercase" >

Deuxième approche: à l'Aide de style qui peut être appliqué avec la classe existante

<input  type="text" class="form-control" style="text-transform: uppercase;">

Voici mon stackBlitz: https://angular-nvd7v6forceuppercase.stackblitz.io

Pour améliorer la réponse par Karl Zilles c'est ma révision de sa solution.
Dans ma version de l'espace réservé n'est pas changé, en majuscules et fonctionne aussi si vous voulez faire un regex sur la chaîne. Il prend aussi le "type" de la chaîne d'entrée (null ou undefined ou vide):

var REGEX = /^[a-z]+$/i;
myApp.directive('cf', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.cf = function(modelValue, viewValue) {
            ctrl.$parsers.push(function(input) {
                elm.css("text-transform", (input) ? "uppercase" : "");
                return input ? input.toUpperCase() : input;
            });
            return (!(ctrl.$isEmpty(modelValue)) && (REGEX.test(viewValue)));
        }
    }
}
});

Je voudrais juste utiliser le filtre lui-même dans le contrôleur:

 $filter('uppercase')(this.yourProperty)

il suffit de garder à l'esprit que, si vous vous allez l'utiliser à l'intérieur d'un contrôleur, par exemple, vous avez besoin d'injecter de ce filtre:

app.controller('FooController', ['$filter', function($filter) ...