AngularJSフォーム要素内の入力フィールドの最初の文字を自動大文字化するにはどうすればよいですか？
jQueryソリューションはすでに見ましたが、これはAngularJSではディレクティブを使用して別の方法で実行する必要があると考えています。
質問する
67244 次
15 に答える
100
はい、ディレクティブを定義し、独自のパーサー関数を定義する必要があります。
myApp.directive('capitalizeFirst', function($parse) {
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
var capitalize = function(inputValue) {
if (inputValue === undefined) { inputValue = ''; }
var capitalized = inputValue.charAt(0).toUpperCase() +
inputValue.substring(1);
if(capitalized !== inputValue) {
modelCtrl.$setViewValue(capitalized);
modelCtrl.$render();
}
return capitalized;
}
modelCtrl.$parsers.push(capitalize);
capitalize($parse(attrs.ngModel)(scope)); // capitalize initial value
}
};
});
HTML：
<input type="text" ng-model="obj.name" capitalize-first>
于 2013-03-06T17:20:35.773 に答える
53
すべてがAngularソリューションを必要とするわけではないことを覚えておいてください。これはjQueryの群集でよく見られます。彼らは、高価なjQuery関数を使用して、純粋なjavascriptでより簡単または簡単に実行できることを好みます。
したがって、大文字の関数が必要になる可能性があり、上記の回答はそれを提供しますが、cssルール「text-transform：capitalize」を使用する方がはるかに効率的です。
<tr ng-repeat="(key, value) in item">
<td style="text-transform: capitalize">{{key}}</td>
<td>{{item}}</td>
</tr>
于 2013-06-04T15:46:49.510 に答える
23
カスタムフィルター「capitalize」を作成して、任意の文字列に適用できます。
<div ng-controller="MyCtrl">
{{aString | capitalize}} !
</div>
フィルタのJavaScriptコード：
var app = angular.module('myApp',[]);
myApp.filter('capitalize', function() {
return function(input, scope) {
return input.substring(0,1).toUpperCase()+input.substring(1);
}
});
于 2013-03-06T09:03:23.430 に答える
4
CSS：first-letter疑似クラスを使用します。
すべてを小文字にし、大文字を最初の文字にのみ適用する必要があります
p{
text-transform: lowercase;
}
p:first-letter{
text-transform: uppercase;
}
次に例を示します：http：//jsfiddle.net/AlexCode/xu24h/
于 2014-03-21T14:09:44.073 に答える
4
単語の最初の文字をすべて大文字にするようにコードを変更しました。' john doe 'を指定すると、出力は' JohnDoe 'になります。
myApp.directive('capitalizeFirst', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
var capitalize = function(inputValue) {
var capitalized = inputValue.split(' ').reduce(function(prevValue, word){
return prevValue + word.substring(0, 1).toUpperCase() + word.substring(1) + ' ';
}, '');
if(capitalized !== inputValue) {
modelCtrl.$setViewValue(capitalized);
modelCtrl.$render();
}
return capitalized;
}
modelCtrl.$parsers.push(capitalize);
capitalize(scope[attrs.ngModel]); // capitalize initial value
}
};
});
于 2014-06-05T02:16:56.427 に答える
4
私はフィルターとディレクティブを好みます。これはカーソルの動きで機能するはずです：
app.filter('capitalizeFirst', function () {
return function (input, scope) {
var text = input.substring(0, 1).toUpperCase() + input.substring(1).toLowerCase();
return text;
}
});
app.directive('capitalizeFirst', ['$filter', function ($filter) {
return {
require: 'ngModel',
link: function (scope, element, attrs, controller) {
controller.$parsers.push(function (value) {
var transformedInput = $filter('capitalizeFirst')(value);
if (transformedInput !== value) {
var el = element[0];
el.setSelectionRange(el.selectionStart, el.selectionEnd);
controller.$setViewValue(transformedInput);
controller.$render();
}
return transformedInput;
});
}
};
}]);
これがフィドルです
于 2014-12-04T09:56:58.283 に答える
3
カーソルの問題を修正するには（Mark Rajcokのソリューションから）、メソッドの先頭にelement [0] .selectionStartを格納してから、element[0].selectionStartとelement[0].selectionEndを格納されているものにリセットしてください。戻り前の値。これにより、選択範囲が角度でキャプチャされます
于 2013-12-18T20:59:09.353 に答える
2
Mark Rajcokソリューションへのコメント：$ setViewValueを使用すると、パーサーとバリデーターが再度トリガーされます。Capitalize関数の先頭にconsole.logステートメントを追加すると、2回出力されます。
次のディレクティブソリューションを提案します（ngModelはオプションです）。
.directive('capitalize', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
var capitalize = function (inputValue) {
return (inputValue || '').toUpperCase();
}
if(ngModel) {
ngModel.$formatters.push(capitalize);
ngModel._$setViewValue = ngModel.$setViewValue;
ngModel.$setViewValue = function(val){
ngModel._$setViewValue(capitalize(val));
ngModel.$render();
};
}else {
element.val(capitalize(element.val()));
element.on("keypress keyup", function(){
scope.$evalAsync(function(){
element.val(capitalize(element.val()));
});
});
}
}
};
});
于 2015-04-22T11:41:08.517 に答える
2
ディレクティブの生成：
ng g directive capitalizeFirst
ファイルcapitalize-first.directive.tsを更新します。
import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
selector: '[appCapitalizeFirst]'
})
export class CapitalizeFirstDirective {
constructor(private ref: ElementRef) {
}
@HostListener('input', ['$event'])
onInput(event: any): void {
if (event.target.value.length === 1) {
const inputValue = event.target.value;
this.ref.nativeElement.value = inputValue.charAt(0).toUpperCase() + inputValue.substring(1);
}
}
}
使用法：
<input appCapitalizeFirst>
このコードはAngular11+で動作します
于 2020-12-07T09:15:32.717 に答える
1
これが最初の文字を大文字にするフィルターのcodepenです：http： //codepen.io/WinterJoey/pen/sfFaK
angular.module('CustomFilter', []).
filter('capitalize', function() {
return function(input, all) {
return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) : '';
}
});
于 2014-09-06T19:44:07.063 に答える
1
CSSのみの回答に加えて、いつでもTwitterBootstrapを使用できます。
<td class="text-capitalize">
于 2015-06-26T05:37:29.467 に答える
0
MarkRajcokのソリューションを構築します。ディレクティブは入力フィールドが使用されている場合にのみ評価されることを考慮することが重要です。そうしないと、入力フィールドの最初の文字が表示されるまでエラーメッセージが表示されます。いくつかの条件付きの簡単な修正：それに対応するjsfiddle：https ://jsfiddle.net/Ely_Liberov/Lze14z4g/2/
.directive('capitalizeFirst', function(uppercaseFilter, $parse) {
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
var capitalize = function(inputValue) {
if (inputValue != null) {
var capitalized = inputValue.charAt(0).toUpperCase() +
inputValue.substring(1);
if (capitalized !== inputValue) {
modelCtrl.$setViewValue(capitalized);
modelCtrl.$render();
}
return capitalized;
}
};
var model = $parse(attrs.ngModel);
modelCtrl.$parsers.push(capitalize);
capitalize(model(scope));
}
};
});
于 2015-05-16T20:57:43.263 に答える
0
css-onyの回答の問題は、角度モデルがビューで更新されないことです。これは、cssがスタイリングを適用するのはレンダリング後にのみであるためです。
次のディレクティブはモデルを更新し、カーソルの位置を記憶します
app.module.directive('myCapitalize', [ function () {
'use strict';
return {
require: 'ngModel',
restrict: "A",
link: function (scope, elem, attrs, modelCtrl) {
/* Watch the model value using a function */
scope.$watch(function () {
return modelCtrl.$modelValue;
}, function (value) {
/**
* Skip capitalize when:
* - the value is not defined.
* - the value is already capitalized.
*/
if (!isDefined(value) || isUpperCase(value)) {
return;
}
/* Save selection position */
var start = elem[0].selectionStart;
var end = elem[0].selectionEnd;
/* uppercase the value */
value = value.toUpperCase();
/* set the new value in the modelControl */
modelCtrl.$setViewValue(value);
/* update the view */
modelCtrl.$render();
/* Reset the position of the cursor */
elem[0].setSelectionRange(start, end);
});
/**
* Check if the string is defined, not null (in case of java object usage) and has a length.
* @param str {string} The string to check
* @return {boolean} <code>true</code> when the string is defined
*/
function isDefined(str) {
return angular.isDefined(str) && str !== null && str.length > 0;
}
/**
* Check if a string is upper case
* @param str {string} The string to check
* @return {boolean} <code>true</code> when the string is upper case
*/
function isUpperCase(str) {
return str === str.toUpperCase();
}
}
};
}]);
于 2016-08-18T08:52:24.617 に答える
-1
付属の大文字フィルターを使用できます。
于 2013-03-06T08:47:02.020 に答える
-3
あなたは純粋なcssを使うことができます：
input {
text-transform: capitalize;
}
于 2013-08-20T20:31:39.703 に答える