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