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

【问题标题】：How to handle different input types bound to same ng-model?如何处理绑定到相同 ng-model 的不同输入类型？
【发布时间】：2016-04-28 19:57:50
【问题描述】：

在一个页面中，我有一个用于日期范围选择的部分。我们的大部分用户群是 IE 10/11，它不支持 input type="date"。我正在使用 Modernizr 来显示/隐藏基于支持的日期输入，如果没有，则提供 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>

【问题讨论】：

“不能使用第三方库” 什么？但是您使用的是角度...？ Angular UI Bootstrap 有一个可以使用的日期选择器。
我不制定规则。 Angular UI Bootstrap 已被技术堆栈禁止使用。

标签： javascript angularjs modernizr

【解决方案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-如果将它从 DOM 中删除，我会试一试。谢谢！编辑：工作奇妙！