当复选框被选中时，清除输入字段

Question

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

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

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

该复选框在页面加载时没有被选中。它在控制器中是这样设置的：vm.selectAllDates = false。

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

EDITI已经添加了我使用你的例子尝试做的事情。

选框。

<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输入字段。当我选择一个日期时，日期被添加到输入字段以及输入字段的下方。当我点击复选框时，日期被从输入字段以及输入字段下面删除。所以它工作了! 但是当我把上面的代码从输入字段下面删除后，它就停止工作了......我当时就想wha？

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.coeditpKGui2LkP487jP0wOfHf?p=preview。

Answer 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;
        }

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