2015-04-24 33 views
7

Ich habe ein Kontrollkästchen und zwei Eingabefelder. Entweder muss das Kontrollkästchen aktiviert sein oder die beiden Eingabefelder müssen ausgefüllt werden. Ich mache die Validierung mit Angular, d. H. Ng-show, ng-erforderlich.Eingabefelder löschen, wenn das Kontrollkästchen aktiviert ist

Wenn das Kontrollkästchen aktiviert ist, sind die beiden Eingabefelder deaktiviert, d. H. Ng-disabled = "$ parent.vm.selectAllDates".

Jetzt muss ich auch alle Daten löschen, die möglicherweise in die Textfelder eingegeben wurden.

Das Kontrollkästchen wird beim Laden der Seite nicht überprüft. Es wird so in den Controller gesetzt: vm.selectAllDates = false;

Gibt es eine Möglichkeit, die Eingabefelder zu löschen, wenn das Kontrollkästchen in Angular aktiviert ist?

EDIT Ich habe hinzugefügt, was ich versuchte dabei Ihr Beispiel mit

Kontrollkästchen:

<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 

Startdatum Eingang:

<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" /> 

Enddatum:

<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" /> 

Eine wirklich seltsame Sache war ich sehen wollte, was los war, so habe ich

{{$parent.vm.selectedReport.Parameters.StartDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.StartDate}} 

nach dem Startdatum Eingabefeld. Wenn ich ein Datum ausgewählt habe, wurde das Datum sowohl dem Eingabefeld als auch unterhalb der Eingabe hinzugefügt. Wenn ich das Kontrollkästchen anklickte, wurde das Datum sowohl aus dem Eingabefeld als auch aus dem Eingabefeld entfernt. So hat es funktioniert! Aber in der Minute, als ich den obigen Code unter dem Eingabefeld entfernte, hörte es auf zu arbeiten ... Ich war wie wha?

Antwort

13

Der einfache Ansatz besteht darin, die Anweisung ngChange für das Kontrollkästchen zu verwenden und das Texteingabemodell auf eine leere Zeichenfolge zu setzen, wenn das Kontrollkästchen aktiviert ist. Etwas wie folgt aus:

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

Demo:http://plnkr.co/edit/pKGui2LkP487jP0wOfHf?p=preview

+0

Danke für die Antwort! Wie würde es mit zwei Eingabefeldern funktionieren? Die zwei Eingabefelder, die ich benutze, haben unterschiedliche ng-Modelle: eines verwendet ein Startdatum und eines verwendet ein Enddatum. Ich habe versucht, den ng-change-Code mit data.test ng-model in die Eingabe zu verschieben. Wenn das Kontrollkästchen aktiviert war, lösche ich die Daten und es funktioniert nicht. – rsford31

+0

Zwei Eingänge und ein Kontrollkästchen? – dfsq

+0

Yup ... Ich habe meine ursprüngliche Post geändert, um Ihnen zu zeigen, was ich versuchte. Ich habe Ihr Beispiel hinzugefügt, aber nicht in das Kontrollkästchen, sondern in das Eingabefeld. – rsford31

0

I off des Gebäudes gelandet, was du mir gezeigt @dfsq. Vielen Dank für Ihre Hilfe! I beendet eine Funktion für ng-Änderung zu schaffen und es auf das Kontrollkästchen setzen:

<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 

Da ist in meinem Controller ich den Code hinzugefügt Start und Eingabefelder Enddatum zu löschen:

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

Wenn es einen besseren Weg gibt, lass es mich wissen. Danke noch einmal!

Verwandte Themen