首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在AngularJS中自动大写输入字段中的第一个字符?

如何在AngularJS中自动大写输入字段中的第一个字符?
EN

Stack Overflow用户
提问于 2013-03-06 16:44:33
回答 14查看 66.8K关注 0票数 55

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

我已经看到了jQuery解决方案,但我相信在AngularJS中必须通过使用指令以不同的方式来实现这一点。

EN

回答 14

Stack Overflow用户

回答已采纳

发布于 2013-03-07 01:20:36

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

代码语言:javascript
复制
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:

代码语言:javascript
复制
<input type="text" ng-model="obj.name" capitalize-first>

Fiddle

票数 100
EN

Stack Overflow用户

发布于 2013-06-04 23:46:50

请记住,并不是所有的东西都需要一个角度的解决方案。你在jQuery人群中经常看到这一点;他们喜欢使用昂贵的jQuery函数来做更简单或更容易用纯javascript做的事情。

因此,虽然您可能非常需要一个capitalize函数,并且上面的答案提供了这一点,但只使用css规则"text-transform: capitalize“会更有效率。

代码语言:javascript
复制
<tr ng-repeat="(key, value) in item">
    <td style="text-transform: capitalize">{{key}}</td>
    <td>{{item}}</td>
</tr>
票数 53
EN

Stack Overflow用户

发布于 2013-03-06 17:03:23

您可以创建自定义过滤器'capitalize‘,并将其应用于任何您想要的字符串:

代码语言:javascript
复制
 <div ng-controller="MyCtrl">
     {{aString | capitalize}} !
</div>

过滤器的JavaScript代码:

代码语言:javascript
复制
var app = angular.module('myApp',[]);

myApp.filter('capitalize', function() {
    return function(input, scope) {
        return input.substring(0,1).toUpperCase()+input.substring(1);
    }
});
票数 23
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15242592

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档