大文字フィルターを使用してみましたが、うまくいきません。私はそれを2つの方法でやってみました：
<input type="text" ng-model="test" uppercase/>
と
<input type="text" ng-model="{{test | uppercase}}"/>
2番目はjavascriptエラーを引き起こします:
構文エラー: トークン 'test' は予期されていません。[:] が必要です
ユーザーがテキストボックスに入力するときに、テキストを強制的に大文字にしたい。
どうやってやるの？
以下の他の回答を参照してください。これは、これよりも優れています。
この回答は、次の回答に基づいています: How to autocapitalize the first character in an input field in AngularJS? .
あなたが望むのは、次のようなパーサー関数になると思います。
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>受け入れられた回答は、誰かが既存の文字列の先頭に小文字を入力しようとすると問題を引き起こします。キーを押すたびに、カーソルは文字列の末尾に移動します。すべての問題に対処する簡単なソリューションを次に示します。
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");
}
};
})
ここにフィドルがあります： http://jsfiddle.net/36qp9ekL/1710/
アイデアは、文字列をクライアント側で大文字として (変換ではなく) 表示し、サーバー側で大文字に変換することです (ユーザーはクライアント側で何が起こるかを常に制御できます)。そう：
1) html で:
<input id="test" type="text" ng-model="test">
ここでは大文字変換はありません。
2）CSSで：
#test {text-transform: uppercase;}
データは大文字で表示されますが、ユーザーが小文字で入力した場合、実際には小文字のままです。3）データベースに挿入するときに、サーバー側で文字列を大文字に変換します。
= = = = = 遊んでみるには、以下を試すことができます:
<input type="text" ng-model="test" ng-change="test=test.toUpperCase();">
<input type="text" ng-model="test" ng-blur="test=test.toUpperCase();">
しかし、あなたのケースでは ng-change または ng-blur の方法は必要ないと思います。
Bootstrap で使用する場合は、text-uppercaseinput の class 属性に追加するだけです。
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();
}
ここに私のフィドルがありますhttp://jsfiddle.net/mzmmohideen/36qp9ekL/299/
これはまったく機能しません。
ng-modelスコープのどのフィールド/プロパティをモデルにバインドするかを指定するためのものです。また、ng-model式を値として受け入れません。angular.js の式は{{との間のもの}}です。
フィルターはuppercase、出力および式が許可されているすべての場所で使用できます。
やりたいことはできませんが、CSS を使用text-transformして少なくともすべてを大文字で表示することはできます。
テキスト フィールドの値を大文字にしたい場合は、カスタム JavaScript を使用してこれを実現できます。
コントローラーで:
$scope.$watch('test', function(newValue, oldValue) {
$scope.$apply(function() {
$scope.test = newValue.toUpperCase();
}
});
モジュールに ' ngSanitize 'を含めることを忘れないでください!
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
}
};
});
注意を払う "？" in "require: ' ?ngModel ',"... その後、アプリケーションが機能しました。
"if(inputValue) {...}" 未定義エラーが発生しない場合
Karl Zillesによる回答を改善するために、これは彼のソリューションの私の改訂版です。私のバージョンでは、プレースホルダーは大文字に変更されておらず、文字列に対して正規表現を実行する場合にも機能します。また、入力文字列の「タイプ」も取ります (null または未定義または空)。
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)));
}
}
}
});
カーソルシフト修正による解決
.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
}
};
});