angularjs文本区字符计数器

嗨,我有一个文字区域characeter计数器。 我的问题是,它不包括空格或换行符。 我该如何做到这一点?

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

这是因为angularJS自动修剪你的模型。

如果您使用的是angularJS 1.1.1或更高版本,请在textarea添加ng-trim="false"

工作示例: http : //jsfiddle.net/9DbYY/

使用Angular, textarea有一个可选的参数,称为ngTrim 。 根据Angular textarea页面 :

如果设置为false,则angular度不会自动修剪input。 (默认:true)

用法:

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

以下代码显示如何使用ngTrim来防止Angular修剪input:

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

请注意, input[text]具有相同的可选ngTrim参数( Angular input page )。

创build一个名为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); }); } } } } }]) 

在你的HTML中调用指令char-count并访问variablesnumberOfCharacters

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

你可以使用函数调用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> 

并在controller.js中

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