选中复选框时清除输入字段答案

【问题标题】：Clear input fields when checkbox is checked选中复选框时清除输入字段
【发布时间】：2015-07-03 16:36:26
【问题描述】：

我有一个复选框和两个输入字段。要么必须选中复选框，要么必须填写两个输入字段。我正在使用 Angular 进行验证，即 ng-show、ng-required。

选中复选框时，两个输入字段被禁用，即 ng-disabled="$parent.vm.selectAllDates"。

现在我还必须清除可能已输入到文本框中的所有数据。

在页面加载时未选中该复选框。它在控制器中设置如下：vm.selectAllDates = false;

在 Angular 中选中复选框时，有什么方法可以清除输入字段吗？

编辑我已经使用您的示例添加了我尝试做的事情

复选框：

<input name="dateSelectAll" type="checkbox" 
           ng-model="$parent.vm.selectAllDates" 
           ng-required="vm.selectedReport.Parameters.StartDate == null && vm.selectedReport.Parameters.EndDate == null" />All Available Dates

开始日期输入：

 <input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
           ng-disabled="$parent.vm.selectAllDates"
           ng-model="$parent.vm.selectedReport.Parameters.StartDate"
           is-open="beginningDateOpened"
           ng-required="$parent.vm.selectAllDates == false"
           ng-change="$parent.vm.selectedReport.Parameters.StartDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.StartDate"
           close-text="Close" />

结束日期：

 <input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
           ng-disabled="$parent.vm.selectAllDates"
           ng-model="$parent.vm.selectedReport.Parameters.EndDate"
           is-open="endDateOpened" ng-change="$parent.vm.selectedReport.Parameters.EndDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.EndDate"
           ng-required="$parent.vm.selectAllDates == false && $parent.vm.selectedReport.Parameters.EndDate == null"
           close-text="Close" />

一件非常奇怪的事情是我想看看发生了什么，所以我添加了

{{$parent.vm.selectedReport.Parameters.StartDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.StartDate}}

在 StartDate 输入字段之后。当我选择一个日期时，该日期被添加到输入字段以及输入下方。当我单击复选框时，日期已从输入字段以及输入字段下方删除。所以它奏效了！但是当我从输入字段下删除上面的代码时，它就停止了工作......我就像是什么？

【问题讨论】：

标签： angularjs input checkbox checked

【解决方案1】：

简单的方法是在复选框上使用ngChange 指令，如果选中复选框，则将文本输入模型设置为空字符串。像这样的：

<input type="text" ng-model="data.test" ng-disabled="data.check">

<input type="checkbox" ng-model="data.check" value="one"
            ng-change="data.test = data.check ? '' : data.test">

演示： http://plnkr.co/edit/pKGui2LkP487jP0wOfHf?p=preview

【讨论】：

感谢您的回复！使用两个输入字段如何工作？我使用的两个输入字段都有不同的 ng-model：一个使用开始日期，一个使用结束日期。我尝试使用 data.test ng-model 将 ng-change 代码移动到输入中，以便在选中复选框时清除数据并且它不起作用。
两个输入和一个复选框？
是的...我已经修改了我的原始帖子以向您展示我尝试过的内容。我已将您的示例添加到输入字段而不是复选框中。

【解决方案2】：

我最终建立在你向我展示的 @dfsq 的基础上。非常感谢您的帮助！我最终为 ng-change 创建了一个函数并将其放在复选框上：

<input name="dateSelectAll" type="checkbox"
           ng-model="$parent.vm.selectAllDates"
           ng-change="vm.clearFields()"
           ng-required="vm.selectedReport.Parameters.StartDate == null && vm.selectedReport.Parameters.EndDate == null" />All Available Dates

然后在我的控制器中，我添加了清除开始日期和结束日期输入字段的代码：

vm.clearFields = function () {
            vm.selectedReport.Parameters.StartDate = vm.selectAllDates ? '' : vm.selectedReport.Parameters.StartDate;
            vm.selectedReport.Parameters.EndDate = vm.selectAllDates ? '' : vm.selectedReport.Parameters.EndDate;
        }

如果有更好的方法，请告诉我。再次感谢！

【讨论】：