anglejs erzwingt Großbuchstaben im Textfeld

Ich habe versucht, den Großbuchstabenfilter zu verwenden, aber er funktioniert nicht. Ich habe es auf zwei Arten versucht:

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

und

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

Der 2. löst einen Javascript-Fehler aus:

Syntaxfehler: Token 'Test' ist unerwartet und erwartet [:]

Ich möchte, dass der Text in Großbuchstaben geschrieben wird, während der Benutzer das Textfeld eingibt.

Wie kann ich das machen?

Bitte beachten Sie die andere Antwort unten, die dieser überlegen ist.

Diese Antwort basiert auf der Antwort hier: Wie wird das erste Zeichen in einem Eingabefeld in AngularJS automatisch kapitalisiert? .

Ich würde mir vorstellen, dass Sie eine Parser-Funktion wie diese wünschen würden:

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>

Die akzeptierte Antwort verursacht Probleme, wenn jemand versucht, am Anfang einer vorhandenen Zeichenfolge einen Kleinbuchstaben einzugeben. Der Cursor bewegt sich nach jedem Tastendruck zum Ende der Zeichenfolge. Hier ist eine einfache Lösung, die alle Probleme behebt:

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");
        }
    };
})

Hier ist eine Geige: http://jsfiddle.net/36qp9ekL/1710/

Die Idee ist, die Zeichenfolge auf der Clientseite als Großbuchstaben anzuzeigen (nicht zu transformieren) und auf der Serverseite in Großbuchstaben umzuwandeln (Benutzer können jederzeit steuern, was auf der Clientseite geschieht). Damit:

1) im HTML:

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

hier keine Großbuchstabenumwandlung.

2) in der CSS:

#test {text-transform: uppercase;}

Daten werden in Großbuchstaben angezeigt, aber tatsächlich immer noch in Kleinbuchstaben, wenn der Benutzer Kleinbuchstaben eingibt. 3) Verwandeln Sie die Zeichenfolge beim Einfügen in die Datenbank auf der Serverseite in Großbuchstaben.

= = = = = zum Herumspielen kann man versuchen:

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

Ich denke jedoch, dass ng-change- oder ng-blur-Methoden für Ihren Fall nicht erforderlich sind.

Sie können keinen Filter für das ng-Modell erstellen, da es zuweisbar sein muss. Die Problemumgehung ist entweder Parser oder einfach ng-change.

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

Das sollte funktionieren.

Bei Verwendung mit Bootstrap fügen Sie einfach text-uppercasedas Klassenattribut der Eingabe hinzu.

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

Hier ist meine Geige http://jsfiddle.net/mzmmohideen/36qp9ekL/299/

Dies wird überhaupt nicht funktionieren.

ng-modeldient zur Angabe, welches Feld / welche Eigenschaft aus dem Bereich an das Modell gebunden werden soll. Auch ng-modelnicht einen Ausdruck als Wert annehmen. Ausdrücke in angle.js sind Dinge zwischen {{und }}.

Der uppercaseFilter kann in der Ausgabe und überall dort verwendet werden, wo Ausdrücke zulässig sind.

Sie können nicht tun, was Sie tun möchten, aber Sie können CSS verwenden text-transform, um zumindest alles in Großbuchstaben anzuzeigen.

Wenn Sie den Wert eines Textfelds in Großbuchstaben haben möchten, können Sie dies mit einem benutzerdefinierten JavaScript erreichen.

In Ihrem Controller:

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

Vergessen Sie nicht, ' ngSanitize ' in Ihr Modul aufzunehmen!

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
        }
    };

});

• Achten Sie auf "?" in "require: ' ? ngModel '" ... hat erst dann meine Bewerbung funktioniert.

• "if (inputValue) {...}" Es tritt kein undefinierter Fehler auf

Bei Verwendung von Bootstrap:

Erster Ansatz: Verwenden von Klassentext in Großbuchstaben

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

Zweiter Ansatz: Verwenden eines Stils, der auf vorhandene Klassen angewendet werden kann

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

Hier ist mein stackBlitz: https://angular-nvd7v6forceuppercase.stackblitz.io

Es ist nur eine Alternative. Sie können diese "Texttransformation: Großschreibung" in Ihrem CSS verwenden und die Texteingabe wird großgeschrieben. es sei denn, der Benutzer gibt es überall in Großbuchstaben ein.

es ist nur eine alternative ^^

Um die Antwort von Karl Zilles zu verbessern, ist dies meine Überarbeitung seiner Lösung. In meiner Version wird der Platzhalter nicht in Großbuchstaben geändert und funktioniert auch, wenn Sie einen regulären Ausdruck für die Zeichenfolge erstellen möchten. Es wird auch der "Typ" der Eingabezeichenfolge (null oder undefiniert oder leer) verwendet:

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)));
        }
    }
}
});

Lösung mit Cursor-Shift-Fix

.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
            }
        };
    });

Wenn Sie Modell und Wert ändern möchten, verwenden Sie:

angular.module('MyApp').directive('uppercased', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.bind("blur change input", function () {
                ngModel.$setViewValue($(this).val().toUpperCase());
                $(this).val($(this).val().toUpperCase());
            });
            element.css("text-transform","uppercase");
        }
    };
});

Fügen Sie dann Ihrem HTML-Eingabetext Großbuchstaben hinzu

<input  type="text" uppercased />

Ich würde nur den Filter selbst in der Steuerung verwenden:

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

Denken Sie daran, dass Sie diesen Filter einspritzen müssen, wenn Sie ihn beispielsweise in einem Controller verwenden möchten:

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