Question

我在ng-repeat中有一个文本输入。当我点击输入时，我正在附加日期选择器并在选择日期时触发输入上的更改（）。

$(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条件的评估值，也会按预期显示true / false。

{{ null == demoInRepeat.date }}

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

使用AngularJS v1.5.8

Answer 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 }">

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

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

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

2 个答案: