Solución:
Consulte la otra respuesta a continuación, que es superior a esta.
esta respuesta se basa en la respuesta aquí: ¿Cómo autocapitalizar el primer carácter en un campo de entrada en AngularJS ?.
Me imagino que lo que querrías sería una función de analizador como esta:
angular
.module('myApp', [])
.directive('capitalize', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
var capitalize = function(inputValue) {
if (inputValue == undefined) inputValue="";
var capitalized = inputValue.toUpperCase();
if (capitalized !== inputValue) {
// see where the cursor is before the update so that we can set it back
var selection = element[0].selectionStart;
modelCtrl.$setViewValue(capitalized);
modelCtrl.$render();
// set back the cursor after rendering
element[0].selectionStart = selection;
element[0].selectionEnd = selection;
}
return capitalized;
}
modelCtrl.$parsers.push(capitalize);
capitalize(scope[attrs.ngModel]); // capitalize initial value
}
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<input type="text" ng-model="name" capitalize>
</div>La respuesta aceptada causa problemas si alguien intenta ingresar una letra minúscula al principio de una cadena existente. El cursor se mueve al final de la cadena después de cada pulsación de tecla. Aquí hay una solución simple que aborda todos los problemas:
directive('uppercased', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function(input) {
return input ? input.toUpperCase() : "";
});
element.css("text-transform","uppercase");
}
};
})
Aquí hay un violín: http://jsfiddle.net/36qp9ekL/1710/
La idea es mostrar (no transformar) la cadena en mayúsculas en el lado del cliente y transformar en mayúsculas en el lado del servidor (los usuarios siempre pueden controlar lo que sucede en el lado del cliente). Entonces:
1) en el html:
<input id="test" type="text" ng-model="test">
aquí no hay transformación en mayúsculas.
2) en el CSS:
#test {text-transform: uppercase;}
los datos se muestran en mayúsculas, pero en realidad siguen en minúsculas, si el usuario escribió en minúsculas. 3) convierta la cadena en mayúsculas en el lado del servidor al insertarla en la base de datos.
= = = = = para jugar, puede intentar seguir:
<input type="text" ng-model="test" ng-change="test=test.toUpperCase();">
<input type="text" ng-model="test" ng-blur="test=test.toUpperCase();">
pero creo que las formas ng-change o ng-blur no son necesarias para su caso.