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?
$parsers
und habe$formatters
die Eingabesteuerung nicht aktualisiert. Hinzufügen der Anrufe zu$setViewValue
und$render
hat den Trick gemacht. Ich werde das Angular-Team bitten, dies zu den Dokumenten hinzuzufügen.var selection = element[0].selectionStart; modelCtrl.$setViewValue(capitalized); modelCtrl.$render(); element[0].selectionStart = selection; element[0].selectionEnd = selection;
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/
quelle
$(element)
und binelement
gleichwertig.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:
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.
quelle
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.
quelle
Bei Verwendung mit Bootstrap fügen Sie einfach
text-uppercase
das Klassenattribut der Eingabe hinzu.quelle
::-webkit-input-placeholder { text-transform: none; } ::-moz-placeholder { text-transform: none; } :-ms-input-placeholder { text-transform: none; } input:-moz-placeholder { text-transform: none; }
. Fügen Sie.text-uppercase
diese Klassen bei Bedarf 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/
quelle
ng-pattern
ich verwende, um eine MAC-Adresse mit einem regulären Ausdruck zu validieren. Irgendwelche Ideen, wie ich beide zum Arbeiten bringen kann? jsfiddle.net/630dkL15Dies wird überhaupt nicht funktionieren.
ng-model
dient zur Angabe, welches Feld / welche Eigenschaft aus dem Bereich an das Modell gebunden werden soll. Auchng-model
nicht einen Ausdruck als Wert annehmen. 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 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(); } });
quelle
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
quelle
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
quelle
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 ^^
quelle
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))); } } } });
quelle
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 } }; });
quelle
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 />
quelle
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) ...
quelle