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

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

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

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

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

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

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

Clear input fields when checkbox is checked

checkbox

input

checked

angularjs