如何autocapitalize在AngularJS的input字段中的第一个字符?

如何在AngularJS表单元素的input字段中自动注入第一个字符?

我已经看到了jQuery解决scheme,但是相信在AngularJS中通过使用一个指令可以完成不同的工作。

是的,您需要定义一个指令并定义您自己的parsing器函数:

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> 

小提琴

请记住,并非所有事情都需要一个Angular解决scheme。 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> 

您可以创build一个自定义filter“大写”,并将其应用于您想要的任何string:

  <div ng-controller="MyCtrl"> {{aString | capitalize}} ! </div> 

filter的JavaScript代码:

 var app = angular.module('myApp',[]); myApp.filter('capitalize', function() { return function(input, scope) { return input.substring(0,1).toUpperCase()+input.substring(1); } }); 

使用CSS:首字母的伪类。

你需要把所有内容都写成小写字母,并且只在第一个字母后面加上大写字母

 p{ text-transform: lowercase; } p:first-letter{ text-transform: uppercase; } 

这是一个例子: http : //jsfiddle.net/AlexCode/xu24h/

修改他的代码,以大写每个字的第一个字符。 如果你给“ 约翰 ·杜 ”,输出是“ 约翰·杜

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

我宁愿filter和指令。 这应该适用于光标移动:

 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; }); } }; }]); 

这是一个小提琴

为了解决游标问题(从Mark Rajcok的解决scheme中),可以在方法的开始存储元素[0] .selectionStart,然后确保将元素[0] .selectionStart和元素[0] .selectionEnd复位到存储的返回前的价值。 这应该捕捉你的select范围的angular度

对Mark Rajcok解决scheme的评论:当使用$ setViewValue时,您再次触发parsing器和validation器。 如果在大写函数的开始处添加console.log语句,则会看到它打印两次。

我build议下面的指令解决scheme(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())); }); }); } } }; }); 

这是一个大写的第一个字母的filtercodepen: 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();}) : ''; } }); 

继CSS之外的答案,你总是可以使用Twitter Bootstrap :

 <td class="text-capitalize"> 

build立Mark Rajcok的解决scheme; 请注意,只有当input字段处于被占用状态时,该指令才会进行评估,否则,您将收到错误消息,直到input字段具有第一个字符。 简单的修复几个条件:一个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)); } }; }); 

用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(); } } }; }]); 

您可以使用提供的大写filter。

http://docs.angularjs.org/api/ng.filter:uppercase

你可以使用纯CSS:

input { text-transform: capitalize; }