Question

我是Angualrjs的新手。我试图在textarea中显示剩余的字符。

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

当用户在textarea中输入时，{{maxLength - message.length}}的双向绑定将立即更新，并保留正确的字符数。

Answer 2

我认为this.scope.remaining是在控制器中定义的。而不是使用this.scope.remaining，将$ scope作为依赖项传递并执行$ scope.remaining。

如果你分享一个jsFiddle，我们就能确切地看到问题所在。

Answer 3

很棒的回答，网球！但是，必须在模板中插入maxLength才能启动验证。

这是插值的小提琴：https://jsfiddle.net/t1fhppc9/

如果键入的字符数超过ng-maxlength（ $ scope.maxLength ）的值，则angular将清除绑定模型（ $ 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 4

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

Angularjs：返回textarea中的剩余字符

4 个答案: