2016-05-03 8 views
1

Hier ist ein jsfiddle. http://jsfiddle.net/cuycbxxp/Angular ng-klick für droddown-option tag

Ich habe eine Dropdown-Auswahl hier für 2. Namen und Nummern.

Wählen Sie den Namen und dann die Nummern aus. Sobald ein Dropdown-Menü für Zahlen ausgewählt ist, wird die Ausführung der Funktion ausgeführt und eine Ausgabe wird an der Konsole angezeigt.

Das könnte so aussehen, als ob es gut funktioniert. aber öffne die Konsole und klicke auf das Drop-down-Menü. Die execute-Funktion wird ausgeführt, bevor wir eine Dropdown-Option auswählen.

Wie kann sichergestellt werden, dass die Ausführungsfunktion nur ausgeführt wird, wenn der Benutzer auf eines der Optionsfelder klickt?

Markup:

<div ng-controller="MyCtrl"> 
    <div> 
     <label>Names:</label> 
     <select ng-model="params.name"> 
      <option value="pa">Taeo</option> 
      <option value="ws">Wers</option> 
      <option value="pn">Petin</option> 
     </select> 
     <br> 
     <label>Numbers:</label> 
     <select ng-click="execute()"> 
      <option value="22">22</option> 
      <option value="33">33</option> 
     </select> 
    </div> 
</div> 
+1

ng-Klick wird ausgelöst, wenn Sie auf ein Element mit diesem Dekorator klicken, nicht auf die Option. Ich denke, ng-change wird in Ihrem Fall wahrscheinlich eine bessere Richtlinie sein? – thsorens

+0

@ thsorens- wld du es als Antwort setzen? Ich sehe, dass andere es beantwortet haben, aber du hast es zuerst getan. Danke Leute. Mein Verständnis ist jetzt etwas besser mit ng-click und ng-change. – Patrick

+1

Ich habe meine Antwort jetzt gepostet. – thsorens

Antwort

3

ng-Klick wird ausgelöst, wenn Sie auf ein Element mit diesem Dekorator klicken, nicht die Option. Ich denke, ng-change wird in Ihrem Fall wahrscheinlich eine bessere Richtlinie sein.

1

ändern <select ng-click="execute()">-<select ng-change="execute()">

Die ng-click ausgeführt wird, wenn Sie auf das Objekt klicken (in diesem Fall das Drop-Down). Die ng-change wird ausgeführt, wenn das Formularelement geändert wird, dh wenn der Benutzer das Dropdown-Element ändert.

1

Sie müssen angular ng-change (ngChange) verwenden.

Verwenden

ng-change="execute()" 

statt

ng-click="execute()" 

Doc Referenz ng-Änderung:https://docs.angularjs.org/api/ng/directive/ngChange

Doc Referenz ng Klick:https://docs.angularjs.org/api/ngTouch/directive/ngClick

Da Sie ng-click verwenden, wird das click-Ereignis ausgelöst, wenn Sie auf das Auswahlfeld klicken. Wenn Sie jedoch ng-change verwenden, wird das Änderungsereignis ausgelöst, wenn sich der Wert des Auswahlfelds auf der Grundlage der Optionsauswahl ändert. Daher wird execute() ausgelöst.

Verwandte Themen