javascript - 打开模式时字符计数器不更新

Question

我有一个页面可以选择插入姓名。 基本上，您单击“添加”按钮，会打开一个带有输入和字符计数器的模式，然后输入所需内容，单击输入下方的“添加”按钮，该名称就会添加到页面中。您可以创建任意多个。

问题是:模式中的字符计数器仅在输入聚焦时更新。如果您的名字有 5 个字母，当您尝试添加第二个名字时，模式会打开为空，但字符计数器显示剩余 75 个字符而不是 80 个字符，直到您单击输入，然后返回到 80 个字符。 此外，当您尝试编辑现有名称时，即使输入中已有名称，字符计数器也会显示还剩 80。然后，当您单击输入时，计数器会更新为正确的值。

这是代码示例，即使您看不到预览，它也包含与问题相关的代码:

https://embed.plnkr.co/rDbeal3nFmeitXQEkP55/

Answer 1

不需要监听 keyup 和 Change 事件，也不需要监听 updateCount 函数，你所需要做的就是使用 ng-model，如下所示:

<div class="form-group" ng-class="{ 'has-error': revenue.name.$invalid }">
     <label>{{ 'revenues.form.name.label'|trans }}</label>
     <input name="name" type="text" class="form-control" ng-model="model.name" ng-required="true" maxlength="80" placeholder="{{ 'revenues.form.name.placeholder'|trans }}">
</div>

<span>You have {{80 - model.name.length}} characters left.</span>

这是一个working plnkr .

<小时/>

更新:

如果您希望跨度根据字符数改变颜色，只需使用 ng-class:

<span ng-class="{'red-text': model.name.length >= 70, 'green-text': model.name.length == 10}">You have {{80 - model.name.length}} characters left.</span>

red-text 和 green-text 是示例 css 类:

.red-text{
    color:red;
}
.green-text{
    color:green;
}

这是updated plunk