AngularJS ng級的添加類但不會在更改時刪除它

-1

我在ng-repeat內有一個文本輸入。當我點擊輸入時，我附加了一個日期選擇器，並在選擇日期時在輸入上觸發change（）。AngularJS ng級的添加類但不會在更改時刪除它

$(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

來源

2017-06-26 user1107685

請閱讀：https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background，最後踢jQuery。 =） – lin

我覺得這個解決方案有助於一旦日期重新選擇刪除無效的輸入級。創建一個名爲的有效輸入，併爲其添加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 }">

來源

2017-06-26 09:17:33 Dixit

[編輯]沒有爲我工作... – user1107685

@ user1107685如果你有解決方案，我將不勝感激，如果你想在某些條件下應用CSS，那麼這個解決方案更好。 – Dixit

對不起，我認爲這工作，但它實際上是卡住有效輸入，並且當我再次輸入無效時不再顯示無效輸入。 – user1107685

我得到了這個工作，沒有使用ng類的解決方法。

我改變了這個...

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

我仍然不明白爲什麼原來的做法並沒有工作，雖然。

來源

2017-06-26 11:32:00 user1107685

AngularJS ng級的添加類但不會在更改時刪除它

回答

相關問題