angularjs force majuscules dans la zone de texte

j'ai essayé d'utiliser le filtre en majuscule mais ça ne marche pas. J'ai essayé de le faire de deux façons:

<input type="text" ng-model="test" uppercase/>

et

<input type="text" ng-model="{{test | uppercase}}"/>

le 2 déclenche une erreur javascript:

Erreur de Syntaxe: Jeton "test" est inattendu, attend [:]

je veux que le texte soit forcé à la majuscule comme les types d'utilisateur dans la zone de texte.

Comment faire?

64
demandé sur Simon MᶜKenzie 2013-05-06 00:01:12

12 réponses

s'il vous plaît voir l'autre réponse ci-dessous, qui est supérieure à celle-ci.

cette réponse est basée sur la réponse ici: comment autocapitaliser le premier caractère dans un champ input dans AngularJS? .

j'imagine que ce que vous voulez serait une fonction d'analyseur comme celle-ci:

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
      }
    };
  });
<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>
99
répondu GHC 2018-03-29 05:42:23

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 /

57
répondu Karen Zilles 2018-01-31 00:15:29

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;}
Les données

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.

33
répondu Timathon 2014-09-16 09:26:20

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.

18
répondu qwerty_igor 2017-02-20 02:07:20

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

16
répondu Ludovic Guillaume 2015-01-02 10:51:19
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 /

5
répondu Mohideen ibn Mohammed 2015-05-19 07:40:58

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();
  }
});
2
répondu TheHippo 2013-05-15 06:06:40

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

2
répondu Deivid 2014-07-30 21:29:09

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"

0
répondu user1999385 2015-01-25 00:21:08

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)));
        }
    }
}
});
0
répondu Matteo Gaggiano 2017-05-23 12:10:39

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
            }
        };
    });
0
répondu user3728092 2018-06-19 12:56:59

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) ...
-1
répondu raeffray 2015-11-04 22:56:37