AngularJS:在Textarea中返回剩余的字符

Question

我是AngualRJ的新手。我试图在文本方面显示其余字符。

<textarea ng-model="message" ng-maxlength="100"></textarea>
<div id="characters" ng-model="message"><span>Characters left: {{remaining()}}</span>  </div>

这是功能：

this.scope.remaining = function() {
return this.scope.maxlength - this.scope.message.length;}

我遇到的错误是：

Error: Error while interpolating: Characters left: {{remaining()}} TypeError:  this.scope is undefined

任何人可以帮忙吗？

Answer 1

我认为您可能使它比需要的要复杂。尝试以下操作：

在您的控制器中：

.controller('myCtrl', function($scope /* other dependencies here */){
    ...
    $scope.maxLength = 100; // this is the max # of chars allowed in the textarea
    ...
});

在您的html中：

<textarea ng-model="message" ng-maxlength="{{maxLength}}"></textarea>
<div id="characters">
    <span>Characters left: {{maxLength - message.length}}</span>
</div>

{{maxLength - message.length}}的双向绑定将立即更新，当用户键入TextArea中的用户类型时剩下的字符数量。

Answer 2

很好的答案，网球！但是，必须在模板中插值最大值才能启动验证。

这是一个带有插值的小提琴：https：//jsfiddle.net/t1fhppc9/

如果键入的字符数超过了ng-maxlength的值（ $ scope.maxlength ），则角清除绑定模型（ $ scope.message ）。剩余的字符数量（ maxlength -message.length ）的度量将不再有效。这可以在上述小提琴中看到。

为了处理这种情况，我在范围上添加了一个函数并将其绑定到模板（就像User3214545的方法一样）。这样，最大长度验证将应用于文本区域，其余字符指标将告诉您您超出的字符数量。

模板：

<div ng-controller="myCtrl">
  <textarea
    ng-model="message"
    ng-maxlength="{{ maxLength }}">
  </textarea>
  <div>
    <span>Characters left: {{ remaining() }}</span>
  </div>
  If there are more than {{ maxLength }} characters, then a red border will be shown.
  <div>
    Message: {{ message }}
  </div>
</div>

控制器：

function myCtrl($scope) {
  $scope.maxLength = 5;
  $scope.remaining = function() {
    return $scope.maxLength - angular.element(document).find('textarea')[0].value.length;
  }
}

在这里'带有功能的小提琴：https：//jsfiddle.net/zz13p1tm/

在更现实的情况下，这将包裹在指令中。范围和元素都将传递给指令。使用孤立范围，我们还可以控制最大长度，必需，禁用以及是否应在模板上显示其余字符的参数。

Answer 3

我认为this.scope.meraining在控制器中定义。不用使用此。Scope.Remanding，将$ scope作为依赖项和做$ scope.Memaining。

如果您共享JSFIDDLE，我们将能够确切查看问题。

Answer 4

您需要将范围作为参数传递到函数中。