it-swarm.com.de

anglejs erzwingt Großbuchstaben im Textfeld

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

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

und

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

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

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

Ich möchte, dass der Text in Großbuchstaben umgewandelt wird, wenn der Benutzer das Textfeld eingibt.

Wie kann ich das machen? 

67
Sam

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

diese Antwort basiert auf der Antwort hier: Wie kann das erste Zeichen in einem Eingabefeld in AngularJS autokapitalisiert werden? .

Ich könnte mir vorstellen, dass das, was Sie möchten, eine Parser-Funktion wie diese sein würde:

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>

102
GHC

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/

60
Karen Zilles

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.

33
Timathon

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.

22
qwerty_igor

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

16
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 

2
Deivid

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

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;">
1
Palash Roy

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 ^^

0
user1999385

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

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)));
        }
    }
}
});
0
Matteo Gaggiano