web-dev-qa-db-fra.com

compteur de caractères de la zone de texte angularjs

Bonjour, j'ai un compteur de caractères pour une zone de texte. Mon problème est qu'il ne compte pas les espaces ni les sauts de ligne. Comment puis-je faire pour qu'il le fasse?

   <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>
angularjsangularjs-directiveangularjs-ng-repeatangular-ui
45
user1424508

C'est parce que angularJS a automatiquement coupé votre modèle.

Si vous utilisez angularJS 1.1.1 ou une version plus récente, ajoutez ng-trim="false" à textarea.

Exemple de travail: http://jsfiddle.net/9DbYY/

80
Banana-In-Black

Créer une directive nommée 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);
                    });
                }
            }
        }
    }
}])

Dans votre appel HTML, appelez la directive count-char et la variable d'accès numberOfCharacters

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

Avec Angular, textarea a un argument optionnel appelé ngTrim. Selon la page Angular textarea :

Si la valeur est false, Angular ne coupera pas automatiquement l'entrée . (par défaut: true)

Usage:

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

Le code suivant montre comment utiliser ngTrim afin d'empêcher Angular de rogner l'entrée:

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

Notez que input[text] a le même argument optionnel ngTrim ( Angular input page ).

2
Imanou Petit

vous pouvez utiliser une fonction avec l'appel ng-change = "" 

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

et dans controller.js

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