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

Question

我有一个复选框和两个输入字段.必须选中复选框或必须填写两个输入字段.我正在使用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输入字段之后.当我选择日期时,日期被添加到输入字段以及输入下方.单击复选框时,日期已从输入字段以及输入字段下删除.所以它奏效了!但是,当我从输入字段下删除上面的代码时,它就停止了工作...我就像哇？

Answer 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