angularjs force majuscules dans la zone de texte

la réponse acceptée pose des problèmes si quelqu'un essaie d'entrer une lettre minuscule au début d'une chaîne existante.. Le curseur se déplace vers la fin de la chaîne après chaque pression de touche. Voici une solution simple qui répond à toutes les questions:

directive('uppercased', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function(input) {
                return input ? input.toUpperCase() : "";
            });
            element.css("text-transform","uppercase");
        }
    };
})

voici un violon: http://jsfiddle.net/36qp9ekL/1710 /

l'idée est d'afficher (et non de transformer) la chaîne comme uppercase du côté client et de la transformer en uppercase du côté serveur (les utilisateurs peuvent toujours contrôler ce qui se passe du côté client). So:

1) en html:

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

ici pas de transformation en majuscules.

2) dans la css:

#test {text-transform: uppercase;}

sont en majuscules, mais en minuscules Si l'utilisateur les Tape. 3) tournez le chaîne en majuscule côté serveur lors de l'insertion dans la base de données.

= = = = = pour jouer autour, peut 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-change ou ng-flou voies ne sont pas nécessaires pour votre cas.

vous ne pouvez pas faire de filtre sur ng-model car il doit être assignable. la solution est soit parser, soit simplement ng-change.

<input ng-model="some" ng-change="some = (some | uppercase)"  />

ça devrait marcher.

lorsqu'il est utilisé avec Bootstrap, il suffit d'ajouter text-uppercase à l'attribut class d'input.

one of the simple way is,
<input type="text" ng-model="test" ng-change="upper(test)/>

just do below 2 line code in your js file,
$scope.upper = function(test){
$scope.test = test.toUpperCase();
}

voici mon violon http://jsfiddle.net/mzmmohideen/36qp9ekL/299 /

cela ne marchera pas du tout.

ng-model sert à préciser quel champ / propriété du champ d'application doit être lié au modèle. En outre, ng-model n'accepte pas une expression comme valeur. Expressions angulaires.js sont des choses entre {{ et }} .

le filtre uppercase pourrait être utilisé dans la sortie et partout où les expressions sont autorisées.

vous ne pouvez pas faire ce que vous voulez faire, mais vous pouvez utiliser le text-transform de CSS pour au moins afficher 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();
  }
});

N'oubliez pas d'inclure " ngSanitize " dans votre module!

app.directive('capitalize', function() {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel',
        link : function(scope, element, attrs, modelCtrl) {
            var capitalize = function(inputValue) {
                if(inputValue) {
                    var capitalized = inputValue.toUpperCase();
                    if (capitalized !== inputValue) {
                        modelCtrl.$setViewValue(capitalized);
                        modelCtrl.$render();
                    }
                    return capitalized;
                }
            };
            modelCtrl.$parsers.push(capitalize);
            capitalize(scope[attrs.ngModel]); // capitalize initial value
        }
    };

});

• faites attention à"?"dans "exiger:' ?ngModel ',"... seulement ensuite travaillé à ma demande.

• "si(inputValue) {...}" Pour non-non défini erreur se produit

c'est juste une alternative , vous pouvez utiliser ce "text - transform : capitaliser;" dans votre css et l'entrée de texte sera capitalisée. sauf si l'utilisateur le tape en majuscules partout.

c'est juste une alternative"

pour améliorer la réponse par Karl Zilles c'est ma révision de sa solution. Dans ma version, le placeholder n'est pas changé en majuscule et fonctionne aussi si vous voulez faire un regex sur la chaîne. Il prend également le "type" de la chaîne de saisie (null ou non défini 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)));
        }
    }
}
});

Solution avec correction de déplacement du curseur

.directive('titleCase', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, modelCtrl) {
                var titleCase = function (input) {
                    let first = element[0].selectionStart;
                    let last = element[0].selectionEnd;
                    input = input || '';
                    let retInput = input.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
                    if (input !== retInput) {
                        modelCtrl.$setViewValue(retInput);
                        attrs.ngModel = retInput;
                        modelCtrl.$render();
                        if (!scope.$$phase) {
                            scope.$apply(); // launch digest;
                        }
                    }
                    element[0].selectionStart = first;
                    element[0].selectionEnd = last;
                    return retInput;
                };
                modelCtrl.$parsers.push(titleCase);
                titleCase(scope[attrs.ngModel]);  // Title case  initial value
            }
        };
    });

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 allez l'utiliser à l'intérieur d'un contrôleur, par exemple, vous devez injecter ce filtre:

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