Question

我有一个页面，可以选择插入名称。基本上你单击添加按钮，打开一个带输入和字符计数器的模态，然后键入你想要的内容，单击输入旁边的添加按钮，该名称就会添加到页面中。您可以根据需要创建任意数量的文件。

问题是：模式中的char计数器仅在输入被聚焦时更新。如果你的名字让我们说5个字母，当你尝试添加第二个名字时，模态会打开为空，但是char计数器显示75chars而不是80，直到你点击输入，然后回到80喜欢它。此外，当您尝试编辑现有名称时，字符计数器会显示80，即使输入中已有名称。然后，当您单击输入时，计数器将更新为正确的值。

这是代码中的示例，即使您无法看到预览，它也会提供与问题相关的代码：

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

Answer 1

无需监听keyup和更改事件，也无需侦听函数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>

红色文本和绿色文本是示例css类：

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

这是updated plunk

打开模态时，Char计数器不会更新

1 个答案: