我有一个页面可以选择插入姓名。 基本上，您单击添加按钮，将打开一个带有输入和字符计数器的模式，然后键入您想要的内容，单击输入下方的添加按钮，该名称将添加到页面中。您可以根据需要创建任意数量。
问题是：模式中的字符计数器仅在输入获得焦点时更新。如果您的名字有 5 个字母，当您尝试添加第二个名字时，模式打开为空，但字符计数器显示剩余 75 个字符而不是 80，直到您单击输入，然后返回到 80，就像它应该的那样。 此外，当您尝试编辑现有名称时，即使输入中已有名称，字符计数器仍会显示 80。再说一次，当您单击输入时，计数器会更新为正确的值。
这是代码中的示例，即使您看不到预览，它也有与问题相关的代码：
【问题讨论】：
标签： javascript angularjs
无需监听 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>
更新：
如果您希望跨度根据字符数改变颜色，只需使用 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;
}
【讨论】：