angularjs área de texto contador de caracteres

Hola tengo un characeter contador para un área de texto. Mi problema es que no cuentan los espacios o puedes incluir varias líneas. Cómo puedo hacer para que lo hace?

   <div class="controls">

   <textarea rows="4" cols="50"  maxlength="1500" data-ng-minLength="1" data-ng  
    model="createprofilefields.description" required highlight-on-
    error></textarea>

    <br />

<!--counter-->
  <span class="form-help">{{1500-createprofilefields.description.length}}         
   Characters</span>

    </div>
  • Usted debe registrar su código de controlador, de modo que la gente puede ver lo que está sucediendo detrás de la escena.
  • No hay nada en el controlador. ¿Qué es happpening es la etiqueta span está mostrando las palabras a la izquierda por 1500-createprofilefields.longitud
  • sin necesidad de código de controlador… ng-model crea automáticamente el ámbito de la propiedad. No hay nada que ver en este ejemplo en relación con el controlador. Todo se hace en el digiere
InformationsquelleAutor user1424508 | 2013-12-16

4 Kommentare

  1. 80

    Es porque angularJS recorta automáticamente el modelo.

    Si usted está usando angularJS 1.1.1 o más reciente, agregar ng-trim="false" a textarea.

    De trabajo ejemplo: http://jsfiddle.net/9DbYY/

    • Hove para resolver el problema con el «símbolo de la lucha contra», como en tu ejemplo, si textarea ha validación de directivas como la ng-minlength=»5″ (inválidas modelo siempre está vacía)
    • No funciona en Mac (cualquier navegador). He probado al mismo tiempo, en la victoria de trabajo como un encanto 🙁
    • puede que no hayas usado la referencia a la modelo. Por favor, código postal para que podamos ayudarle.
    • No funciona con salto de línea? Copiado de texto al azar de algún lugar. Se detiene, mientras que algunos personajes son de la izquierda.
  2. 2

    Con Angular, textarea tiene un argumento opcional llamado ngTrim. De acuerdo a la Angular textarea página:

    Si se establece a false Angular no recortar automáticamente la entrada.
    (valor predeterminado: true)

    Uso:

    <textarea
      ng-model="string"
      [ng-trim="boolean"]>
    ...
    </textarea>

    El código siguiente muestra cómo utilizar ngTrim con el fin de prevenir Angular para cortar la entrada:

    <!DOCTYPE html>
    <html lang="en" ng-app="">
    
    <head>
        <meta charset="UTF-8">
        <title>Character count</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    </head>
    
    <body>
        <textarea ng-trim="false" ng-model="countmodel"></textarea>
        <p>{{15 - countmodel.length}} left</p>
    </body>
    
    </html>

    Nota que input[text] tiene el mismo opcional ngTrim argumento (Angular de la página de entrada).

  3. 2

    Crear una directiva llamada charCount

    .directive('charCount', ['$log', '$timeout', function($log, $timeout){
        return {
            restrict: 'A',
            compile: function compile()
            {
                return {
                    post: function postLink(scope, iElement, iAttrs)
                    {
                        iElement.bind('keydown', function()
                        {
                            scope.$apply(function()
                            {
                                scope.numberOfCharacters = iElement.val().length;
                            });
                        });
                        iElement.bind('paste', function()
                        {
                            $timeout(function ()
                            {
                                scope.$apply(function()
                                {
                                    scope.numberOfCharacters = iElement.val().length;
                                });
                            }, 200);
                        });
                    }
                }
            }
        }
    }])

    En el código HTML de llamar a la directiva char-cuenta y acceder a la variable numberOfCharacters

    <textarea
            ng-model="text"
            ng-required="true"
            char-count></textarea>
    Number of Characters: {{ numberOfCharacters }}<br>
  4. 0

    puede usar una función llamada ng-cambio=»»

           <div class="controls">
    
       <textarea rows="4" cols="50"  maxlength="1500" 
            data-ng-minLength="1" data-ng  
            model="createprofilefields.description" 
            ng-change="countLength(createprofilefields.description.length)"
            required highlight-on-error>
       </textarea>
    
            <br />
    
        <!--counter-->
          <span class="form-help">{{1500-chrLength}}         
           Characters</span>
    
            </div>

    y en controller.js

    $scope.countLength = function(val){
      $scope.chrLength = val;
    }

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea