angularjs文本区域字符计数器答案

【问题标题】：angularjs text area character counterangularjs文本区域字符计数器
【发布时间】：2013-12-16 03:45:13
【问题描述】：

您好，我有一个文本区域的字符计数器。我的问题是它不计算空格或换行符。我该如何做到这一点？

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

【问题讨论】：

您应该发布您的控制器代码，以便人们可以看到幕后发生的事情。
控制器里什么都没有。正在发生的是 span 标签显示 1500-createprofilefields.length 留下的单词
@tamakisquare 不需要控制器代码...ng-model 自动创建范围属性。在这种情况下，关于控制器没有什么可看的。这一切都在摘要中完成

标签： angularjs angularjs-directive angularjs-ng-repeat angular-ui

【解决方案1】：

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

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

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

【讨论】：

如果 textarea 具有像 ng-minlength="5" 之类的验证指令（无效模型始终为空），则必须解决“符号计数器”的问题，例如您的示例
不适用于 Mac（任何浏览器）。我同时测试了胜利 - 像魅力一样工作:(
@AvaelKross 您可能没有使用对模型的引用。请发布代码以便我们提供帮助。
不能使用换行符吗？从某处复制随机文本。剩下一些字符时停止。

【解决方案2】：

对于 Angular，textarea 有一个名为 ngTrim 的可选参数。根据Angular textarea page：

如果设置为 false Angular 将不会自动修剪输入。（默认：真）

用法：

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

以下代码显示了如何使用ngTrim 来防止 Angular 修剪输入：

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

【讨论】：

【解决方案3】：

创建一个名为 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 并访问变量 numberOfCharacters

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

【讨论】：

【解决方案4】：

您可以通过调用 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;
}

【讨论】：