javascript - descargar angular

angularjs fuerza mayúscula en cuadro de texto

Question

He intentado usar el filtro de mayúsculas pero no funciona. He intentado hacerlo de dos maneras:

<input type="text" ng-model="test" uppercase/>

y

<input type="text" ng-model="{{test | uppercase}}"/>

El segundo desencadena un error de javascript:

Error de sintaxis: el "test" del token es inesperado, esperando [:]

Quiero que el texto sea forzado a mayúsculas mientras el usuario escribe en el cuadro de texto.

¿Cómo puedo hacer eso?

Answer 1

¡No olvides incluir '' ngSanitize '' en tu módulo!

app.directive(''capitalize'', function() {
    return {
        restrict: ''A'', // only activate on element attribute
        require: ''?ngModel'',
        link : function(scope, element, attrs, modelCtrl) {
            var capitalize = function(inputValue) {
                if(inputValue) {
                    var capitalized = inputValue.toUpperCase();
                    if (capitalized !== inputValue) {
                        modelCtrl.$setViewValue(capitalized);
                        modelCtrl.$render();
                    }
                    return capitalized;
                }
            };
            modelCtrl.$parsers.push(capitalize);
            capitalize(scope[attrs.ngModel]); // capitalize initial value
        }
    };

});

• Preste atención a "?" en "require: '' ? ngModel ''," ... solo funcionó mi aplicación.

• "if (inputValue) {...}" Para que no se produzca un error indefinido

Answer 2

Cuando se usa con Bootstrap, simplemente agregue text-uppercase al atributo de clase de entrada.

Answer 3

Esto no funcionará en absoluto.

ng-model es para especificar qué campo / propiedad del ámbito debe estar vinculado al modelo. Además, ng-model no acepta una expresión como valor. Las expresiones en angular.js son cosas entre {{ y }} .

El filtro en uppercase podría usarse en la salida y en todas partes donde se permiten las expresiones.

No puede hacer lo que quiere hacer, pero podría usar la text-transform de text-transform de CSS para al menos mostrar todo en mayúsculas.

Si desea tener el valor de un campo de texto en letras mayúsculas, puede lograr esto con algún JavaScript personalizado.

En su controlador:

$scope.$watch(''test'', function(newValue, oldValue) {
  $scope.$apply(function() {
    $scope.test = newValue.toUpperCase();
  }
});

Answer 4

La idea es mostrar (no transformar) la cadena en mayúsculas en el lado del cliente y transformarla en mayúsculas en el lado del servidor (los usuarios siempre pueden controlar lo que sucede en el lado del cliente). Asi que:

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 aún en minúsculas, si el usuario escribió en minúsculas. 3) gire la cadena en mayúsculas en el lado del servidor cuando la inserte 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.

Answer 5

La respuesta aceptada causa problemas si alguien intenta ingresar una letra minúscula al comienzo de una cadena existente. El cursor se mueve al final de la cadena después de cada presió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/

Answer 6

No puede hacer un filtro en ng-model ya que tiene que ser asignable. la solución es un analizador, o simplemente ng-change.

<input ng-model="some" ng-change="some = (some | uppercase)"  />

Esto debería funcionar.

Answer 7

Para mejorar la respuesta de Karl Zilles, esta es mi revisión de su solución. En mi versión, el marcador de posición no se cambia a mayúsculas y también funciona si desea hacer una expresión regular en la cadena. También toma el "tipo" de la cadena de entrada (nula o indefinida o vacía):

var REGEX = /^[a-z]+$/i;
myApp.directive(''cf'', function() {
    return {
        require: ''ngModel'',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.cf = function(modelValue, viewValue) {
            ctrl.$parsers.push(function(input) {
                elm.css("text-transform", (input) ? "uppercase" : "");
                return input ? input.toUpperCase() : input;
            });
            return (!(ctrl.$isEmpty(modelValue)) && (REGEX.test(viewValue)));
        }
    }
}
});

Answer 8

Solución con cursor shift fix

.directive(''titleCase'', function () {
        return {
            restrict: ''A'',
            require: ''ngModel'',
            link: function (scope, element, attrs, modelCtrl) {
                var titleCase = function (input) {
                    let first = element[0].selectionStart;
                    let last = element[0].selectionEnd;
                    input = input || '''';
                    let retInput = input.replace(//w/S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
                    if (input !== retInput) {
                        modelCtrl.$setViewValue(retInput);
                        attrs.ngModel = retInput;
                        modelCtrl.$render();
                        if (!scope.$$phase) {
                            scope.$apply(); // launch digest;
                        }
                    }
                    element[0].selectionStart = first;
                    element[0].selectionEnd = last;
                    return retInput;
                };
                modelCtrl.$parsers.push(titleCase);
                titleCase(scope[attrs.ngModel]);  // Title case  initial value
            }
        };
    });

Answer 9

Yo solo usaría el filtro en el controlador:

 $filter(''uppercase'')(this.yourProperty)

solo tenga en cuenta que, si va a utilizarlo dentro de un controlador, por ejemplo, necesita inyectar este filtro:

app.controller(''FooController'', [''$filter'', function($filter) ...

Answer 10

es solo una alternativa, puede usar esta "transformada de texto: capitalizar;" en su css y la entrada de texto estará en mayúscula. a menos que el usuario lo escriba en letras mayúsculas en todas partes.

es solo una alternativa ^^

Answer 11

Por favor, vea 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>

Answer 12

one of the simple way is,
<input type="text" ng-model="test" ng-change="upper(test)/>

just do below 2 line code in your js file,
$scope.upper = function(test){
$scope.test = test.toUpperCase();
}

Aquí está mi violín http://jsfiddle.net/mzmmohideen/36qp9ekL/299/