¿Cómo autocapitalizar el primer carácter en un campo de entrada en AngularJS?

Recuerde que no todo necesita una solución angular. Esto se ve mucho con la multitud de jQuery; les gusta usar costosas funciones de jQuery para hacer cosas que son más simples o más fáciles de hacer con javascript puro.

Así que si bien es posible que necesite una función de mayúsculas y las respuestas anteriores proporcionan eso, va a ser mucho más eficiente usar la regla css "text-transform: capitalize"

<tr ng-repeat="(key, value) in item">
    <td style="text-transform: capitalize">{{key}}</td>
    <td>{{item}}</td>
</tr>

Puede crear un filtro personalizado 'capitalizar' y aplicarlo a cualquier cadena que desee:

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

Código JavaScript para el filtro:

var app = angular.module('myApp',[]);

myApp.filter('capitalize', function() {
    return function(input, scope) {
        return input.substring(0,1).toUpperCase()+input.substring(1);
    }
});

Utilice la pseudo clase CSS :first-letter.

Necesitas poner todo en minúsculas y después aplicar las mayúsculas solo a la primera letra

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

He Aquí un ejemplo: http://jsfiddle.net/AlexCode/xu24h/

Modificó su código para poner en mayúscula cada primer carácter de la palabra. Si le das 'john doe', la salida es '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
     }
   };
});

Preferiría un filtro y una directiva. Esto debería funcionar con el movimiento del cursor:

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

Aquí hay un violín

Para solucionar el problema del cursor (desde donde la solución de Mark Rajcok), puede almacenar el elemento [0].selectionStart en el comienzo de su método, y luego asegúrese de restablecer el elemento [0].selectionStart y element [0].selectionEnd al valor almacenado antes de la devolución. Esto debería capturar su rango de selección en angular

Comment to Mark Rajcok solution: cuando se utiliza set setViewValue, se activan los analizadores y validadores de nuevo. Si agrega una consola.declaración de registro al principio de su función de mayúscula, la verá impresa dos veces.

Propongo la siguiente solución de directiva (donde ngModel es opcional):

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

Aquí hay un codepen para un filtro que pone en mayúscula la primera letra: 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();}) : '';
    }
  });

Además de las respuestas solo CSS, siempre puedes usar Twitter Bootstrap :

<td class="text-capitalize">

Construyendo la solución de Mark Rajcok; Es importante considerar que la directiva evalúa solo cuando el campo de entrada está activado, de lo contrario obtendrá mensajes de error disparando hasta que el campo de entrada tenga un carácter 1st. Solución fácil con algunos condicionales: Un jsfiddle para ir con eso: 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));
        }
       };
    });

El problema con las respuestas css-ony es que el modelo angular no se actualiza con la vista. Esto se debe a que css solo aplica estilos después del renderizado.

La siguiente directiva actualiza el modelo Y recuerda la ubicación de los cursores

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

Puede utilizar el filtro en mayúsculas proporcionado.

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

Puedes usar css puro:

input { text-transform: capitalize; }