Question

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

选中该复选框后，两个输入字段将被禁用，即ng-disabled =“$ parent.vm.selectAllDates”。

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

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

在Angular中选中复选框时，是否有某种方法可以清除输入字段？

EDIT 我添加了我尝试使用你的例子

复选框：

<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

Answer 2

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

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

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

> aggregate(cbind(var1 = 1:10, var2 = 101:110), 
      by=list(range=cut(1:10, breaks=c(2,4,8,10))), 
      FUN = function(x) 
        { 
        c(obs=length(x[, "var2"]), avg=mean(x[, "var2"]), sd=dev(x[, "var2"])) 
        })

Error in x[, "var2"] (from #1) : incorrect number of dimensions

> cbind(var1 = 1:10, var2 = 101:110)[, "var2"]
 [1] 101 102 103 104 105 106 107 108 109 110

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

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

2 个答案: