AngularJS ng-class 添加类但在更改时不删除它

Posted 2023-05-09

【中文标题】AngularJS ng-class 添加类但在更改时不删除它

【英文标题】：AngularJS ng-class adding class but not removing it on change

【发布时间】：2017-11-29 00:41:41

【问题描述】：

我在 ng-repeat 中有一个文本输入。当我单击输入时，我将附加一个日期选择器并在选择日期时触发输入上的 change()。

$(this).val(picker.startDate.format(datePickerOutputFormat)).change();

这是可行的，AngularJS 范围会接受更改。我在页面上有一个绑定到日期值的跨度，因此我可以看到这种变化。

在输入中，我想使用 ng-class 突出显示空日期。

<input type="text"
  class="form-control single-date-input"
  placeholder="dd/mm/yyyy"
  ng-model="demoInRepeat.date"
  ng-class=" 'invalid-input' : null == demoInRepeat.date ">

这工作正常，直到我手动编辑输入值并删除日期。如果我再次从日期选择器中选择日期，则无效输入类仍然存在，即使我用来显示范围的输入和跨度上的值都更新了。

即使我显示 ng-class 条件的评估值，这也会按预期显示真/假。

 null == demoInRepeat.date 

我希望在重新选择日期后删除无效输入类。有什么想法吗？

使用 AngularJS v1.5.8

【问题讨论】：

请阅读：***.com/questions/14994391/… 最后踢 jQuery。 =)

【参考方案1】：

我认为此解决方案有助于在重新选择日期后删除无效输入类。再创建一个名为 valid-input 的类并为其添加 CSS 即可。

<input type="text"
  class="form-control single-date-input"
  placeholder="dd/mm/yyyy"
  ng-model="demoInRepeat.date"
  ng-class=" 'invalid-input' : null == demoInRepeat.date , 'valid-input' : null != demoInRepeat.date ">

【讨论】：

@user1107685 如果您有解决方案，我将不胜感激，是的，如果您想在某些情况下应用 CSS，那么此解决方案会更好。

对不起，我认为这有效，但实际上卡在有效输入上，当我再次使输入无效时不再显示无效输入。

能否请您为此创建 plunker，我会更好地帮助您。

【参考方案2】：

我使用不使用 ng-class 的解决方法来解决这个问题。

我改变了这个...

<input type="text"
  class="form-control single-date-input"
  placeholder="dd/mm/yyyy"
  ng-model="demoInRepeat.date"
  ng-class=" 'invalid-input' : null == demoInRepeat.date ">

到这里

<input type="text"
  class="form-control single-date-input  null == demoInRepeat.date ? 'invalid-input' : '' "
  placeholder="dd/mm/yyyy"
  ng-model="demoInRepeat.date">

我仍然不明白为什么原来的方法不起作用。