如何处理绑定到同一 ng-model 的不同输入类型？

Question

在一个页面中，我有一个日期范围选择部分。我们的用户群中有很大一部分是 IE 10/11，它不支持 input type="date"。我正在使用 Modernizr show/hide 基于支持的日期输入，如果不支持，则提供 type="text" 的输入，两者都绑定到相同的 ng-model。由于文本和日期不兼容，因此在文本中键入垃圾邮件会导致控制台出现错误。有没有办法修复此控制台垃圾邮件？使用第三方库不是一种选择。

<div class="col-md-3" data-ng-show="searchBillCreatedDate == 'custom'">
    <label>From</label>
    <input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-show="browser.supportsDateInput">
    <input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-show="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
</div>

Answer 1

像这样将您的 ng-show 更改为 ng-if：

<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-if="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-if="!browser.supportsDateInput" placeholder="yyyy-mm-dd">

您收到错误是因为它绑定到第一个输入的模型，这是一个日期输入。 ng-show 只是使用 CSS 来隐藏元素，但它仍然存在于 DOM 中。然而，ng-if 将它从 DOM 中完全删除，只剩下一个 ng-model="searchFromDate"

如何处理绑定到同一 ng-model 的不同输入类型？

How to handle different input types bound to same ng-model?

javascript

modernizr

angularjs