如何在AngularJS表单元素中自动大写输入字段中的第一个字符?
我已经看到了jQuery解决方案,但我相信在AngularJS中必须通过使用指令以不同的方式来实现这一点。
发布于 2013-03-07 01:20:36
是的,您需要定义一个指令并定义您自己的解析器函数:
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-06-04 23:46:50
请记住,并不是所有的东西都需要一个角度的解决方案。你在jQuery人群中经常看到这一点;他们喜欢使用昂贵的jQuery函数来做更简单或更容易用纯javascript做的事情。
因此,虽然您可能非常需要一个capitalize函数,并且上面的答案提供了这一点,但只使用css规则"text-transform: capitalize“会更有效率。
<tr ng-repeat="(key, value) in item">
<td style="text-transform: capitalize">{{key}}</td>
<td>{{item}}</td>
</tr>
发布于 2013-03-06 17:03: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);
}
});
https://stackoverflow.com/questions/15242592
复制相似问题