2017-08-29 3 views
0

Ich habe eine HTML-Seite, wo das Klicken auf ein Kontrollkästchen bewirkt, dass ein neuer Abschnitt der Seite sichtbar wird. Das HTML sieht wie folgt aus:ng-show nicht ausgelöst, wenn Eingabe Kontrollkästchen über Javascript ausgewählt

  <input id="formcheck" ng-model="collapseform" type="checkbox">Fill in the Test Form   
      <div id="mainformdiv" class="wizard-div" ng-show="collapseform">     
        <div>       
         <div class="main-block">  
           ...and so on 
         </div> 
        </div> 
      </div> 

Dieses Teil funktioniert gut - standardmäßig, dass ein Teil der Seite versteckt ist, und wenn ich das Kontrollkästchen auswählen, wird der Rest der Seite. Wenn ich es abnehme, wird der Rest der Seite wieder ausgeblendet.

Weiter unten auf der gleichen Seite gibt es eine Tabelle, und wenn Sie einen Knoten in dieser Tabelle auswählen ruft er eine Controller-Funktion, die einige interne Werte festgelegt - dieser Teil funktioniert auch, so scheint der Controller zu sein richtig eingerichtet und alle Funktionen können angerufen werden.

Das Problem, das ich sehe, ist das: Ich möchte ein bisschen zu der Controller-Funktion hinzufügen, die aufgerufen wird, wenn der Tabellenknoten ausgewählt ist, und was ich es tun soll, ist neben der Einstellung der internen Werte (was es auch richtig macht), aktivieren Sie das Kontrollkästchen und lassen Sie den versteckten Teil der Seite als Antwort anzeigen. Ich dachte, wenn ich das Kontrollkästchen durch die Javascript aktiviert, die dies erreichen würden, so fügte ich diese auf die interne Wert Einstellung Funktion:

 if (document.getElementById("formcheck").checked == false) { 
      document.getElementById("formcheck").checked = true; 
     } 

Diese Art der Arbeiten - die Checkbox ab Bekommen überprüft, wenn das Stück Code ist Anders als wenn ich mit der Maus auf das Kontrollkästchen klicke, scheint es die ng-show nicht auszulösen und so wird der versteckte Teil der Seite nicht sichtbar gemacht. Gibt es noch etwas, was ich tun muss, damit dies funktioniert?

Danke!

Antwort

1

Sie sollten in der Lage sein, den Wert des Modells zu ändern. Da NgModel eine bidirektionale Bindung bereitstellt, überwacht es auch die $scope Variable.

Zum Beispiel tun

$scope.collapseform = false 

statt

if (document.getElementById("formcheck").checked == false) { 
    document.getElementById("formcheck").checked = true; 
} 
+0

, die zu funktionieren schien, danke! Manchmal merke ich eine seltsame Verzögerung zwischen der Auswahl und den versteckten Feldern, aber das schien es zu tun. Sehr geschätzt! – monkeyWithAMachinegun

Verwandte Themen