angularjs zone de texte compteur de caractères
Salut j'ai un compteur de caractères pour une zone de texte. Mon problème est qu'il ne compte pas les espaces ou les linebreaks. Comment puis-je faire pour qu'il ne sorte?
<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>
4 réponses
c'est parce qu'angularJS automatiquement coupé votre modèle.
si vous utilisez angularJS 1.1.1 ou plus récent, ajoutez ng-trim="false"textarea.
Avec Angle,textarea a un argument optionnel appelé ngTrim. Selon l' Angulaire textarea de la page:
Si la valeur est false Angulaire ne sera pas automatiquement ajuster l'entrée. (par défaut: true)
Utilisation:
<textarea
ng-model="string"
[ng-trim="boolean"]>
...
</textarea>
le code suivant indique comment utiliser ngTrim afin de prévenir Angulaire de couper 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 la même facultatif ngTrim argument (Angulaire de la page d'entrée).
créer une directive appelé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 HTML appelez la directive char-count et accédez à la variable number ofcharacters
<textarea
ng-model="text"
ng-required="true"
char-count></textarea>
Number of Characters: {{ numberOfCharacters }}<br>
vous pouvez utiliser une fonction à appeler ng-changement=""
<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 le contrôleur.js
$scope.countLength = function(val){
$scope.chrLength = val;
}