檢查複選框時清除輸入字段

我有一個複選框和兩個輸入字段。無論是複選框必須被檢查或兩個輸入字段必須填寫。我使用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}}

起始日期輸入後場。當我選擇日期時，日期被添加到輸入字段以及輸入下面。當我點擊複選框時，日期從輸入字段以及從輸入字段下移除。所以它的工作！但是，當我從輸入字段中刪除上面的代碼時，它停止了工作......我就像wha？

來源

2015-04-24 rsford31

簡單的方法是在複選框上使用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

來源

2015-04-24 22:08:47 dfsq

感謝您的迴應！如何使用兩個輸入字段工作？我使用的兩個輸入字段各有不同的ng模型：一個使用開始日期，另一個使用結束日期。我嘗試使用data.test ng-model將ng-change代碼移動到輸入中，以便在複選框被選中時清除數據並且不起作用。 – rsford31

兩個輸入和一個複選框？ – dfsq

是的...我修改了我原來的帖子，告訴你我試過了什麼。我已將您的示例添加到輸入字段而不是複選框。 – rsford31

我結束了建設關中你給我@dfsq。非常感謝您的幫助！我結束了創建爲NG-變化的函數，並把它的複選框：

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

如果有更好的方法，請讓我知道。再次感謝！

來源

2015-04-27 19:06:39 rsford31

檢查複選框時清除輸入字段

回答

相關問題