如何在AngularJS的输入字段中自动调整第一个字符的资本？

Question

如何在AngularJS表单元素内的输入字段中自动调整第一个字符的资本？

我已经看到了jQuery解决方案,但是相信在AngularJS中必须通过使用指令来完成.

Answer 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>

小提琴

Answer 2

请记住,并非一切都需要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>

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