Как автокапитализировать первый символ во входном поле внутри элемента формы AngularJS?
Я уже видел решение jQuery, но считаю, что это нужно сделать по-другому в AngularJS с помощью директивы.
Как автокапитализировать первый символ в поле ввода в AngularJS?
Ответ 1
Да, вам нужно определить директиву и определить собственную функцию парсера:
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>
Ответ 2
Помните, что не все нуждается в решении Angular. Вы видите это много с толпой jQuery; они любят использовать дорогие функции jQuery, чтобы делать вещи, которые проще или проще сделать с чистым javascript.
Поэтому, хотя вам может понадобиться функция заглавной буквы, и приведенные выше ответы предусматривают, что будет намного более эффективно использовать правило CSS для преобразования текста: преобразование: капитализировать
<tr ng-repeat="(key, value) in item">
<td style="text-transform: capitalize">{{key}}</td>
<td>{{item}}</td>
</tr>
Ответ 3
Вы можете создать собственный "заглавный" фильтр и применить его к любой требуемой строке:
<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);
}
});
Ответ 4
Использовать псевдословный класс CSS: first-letter.
Вам нужно поместить все строчные буквы и после применения прописных букв только к первой букве
p{
text-transform: lowercase;
}
p:first-letter{
text-transform: uppercase;
}
Вот пример: http://jsfiddle.net/AlexCode/xu24h/
Ответ 5
Модифицировал свой код, чтобы использовать каждый первый символ слова. Если вы дадите " john doe", вывод " John Doe"
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
}
};
});
Ответ 6
Я бы предпочел фильтр и директиву. Это должно работать с движением курсора:
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;
});
}
};
}]);
Вот fiddle
Ответ 7
Чтобы исправить проблему с курсором (из решения Mark Rajcok) вы можете сохранить элемент [0].selectionStart в начале вашего метода, а затем убедитесь, что элемент reset [0].selectionStart и элемент [0].selectionEnd сохраненное значение перед возвратом. Это должно занять ваш диапазон выбора в angular
Ответ 8
Комментарий к решению Mark Rajcok: при использовании $setViewValue вы снова запускаете синтаксические анализаторы и валидаторы. Если вы добавите инструкцию console.log в начале вашей функции заглавия, вы увидите ее дважды напечатанную.
Я предлагаю следующее директивное решение (где 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()));
});
});
}
}
};
});
Ответ 9
Здесь код для фильтра, который заглавной буквы: 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();}) : '';
}
});
Ответ 10
В дополнение к ответам только с CSS, вы всегда можете использовать Twitter Bootstrap:
<td class="text-capitalize">
Ответ 11
Создание решения Марка Райкока; Важно учитывать, что директива оценивает только при включенном поле ввода, иначе вы получите сообщение об ошибках, пока поле ввода не будет иметь 1-й символ. Легкое исправление с несколькими условными обозначениями: 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));
}
};
});
Ответ 12
Проблема с ответами css-ony заключается в том, что модель angular не обновляется с представлением. Это связано с тем, что 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();
}
}
};
}]);
Ответ 13
Вы можете использовать предоставленный фильтр в верхнем регистре.
Ответ 14
Вы можете использовать чистый css:
input {
text-transform: capitalize;
}