anglejs erzwingt Großbuchstaben im Textfeld

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

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 in Großbuchstaben anzuzeigen (und nicht zu transformieren) und auf der Serverseite in Großbuchstaben umzuwandeln (Benutzer können immer kontrollieren, was auf der Clientseite geschieht). So:

1) in der html:

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

hier keine Transformation in Großbuchstaben.

2) in der css:

#test {text-transform: uppercase;}

die Daten werden in Großbuchstaben dargestellt, sind jedoch immer noch Kleinbuchstaben, wenn der Benutzer Kleinbuchstaben eingibt. 3) Die Zeichenfolge wird beim Einfügen in die Datenbank auf der Serverseite in Großbuchstaben umgewandelt.

= = = = = Zum Spielen können Sie folgendes versuchen:

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

aber ich denke, dass ng-change- oder ng-blur-wege für ihren fall nicht notwendig sind.

Sie können keinen Filter für ng-model erstellen, da dieser 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-uppercase zum 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/

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 "erfordern: '? ngModel '," ... erst dann funktionierte meine Anwendung.

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

Das wird überhaupt nicht funktionieren.

ng-model gibt an, welches Feld bzw. welche Eigenschaft aus dem Bereich an das Modell gebunden werden soll. Außerdem akzeptiert ng-model keinen Ausdruck als Wert. Ausdrücke in angle.js sind Dinge zwischen {{ und }}.

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

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

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

In Ihrem Controller:

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

Bei Verwendung von Bootstrap:

Erster Ansatz: Verwenden von Klassentext in Großbuchstaben

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

Zweiter Ansatz: Verwendung eines Stils, der mit einer vorhandenen Klasse angewendet werden kann

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

es ist nur eine Alternative, Sie können diese "text-transform: capitalize;" in Ihrer CSS verwenden und der Texteingabe wird groß geschrieben. es sei denn, der Benutzer gibt es überall in Großbuchstaben ein.

es ist nur eine alternative ^^

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

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 eine Regex auf den String anwenden möchten. Es nimmt auch den "Typ" der Eingabezeichenfolge (null oder undefiniert oder leer):

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