Wie greife ich beim Klicken auf die Schaltfläche in AngularJS über den Controller auf die ausgewählte Option zu?

Question

Ich habe ein Auswahlfeld mit einem ng-model Attribut in einer Registerkarte im Tabset von ui-bootstrap.Es gibt auch eine Schaltfläche auf der Registerkarte.Beim Klicken auf die Schaltfläche möchte ich den ausgewählten Wert in das Modell übernehmen.Ich habe es mit versucht

<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick()">Click</button>

und dann im Controller

$scope.buttonClick = function() {
  //try to access $scope.selectedOption
}

Aber das scheint den Wert nicht zu enthalten.Ich habe versucht, in die zu schauen $scope Variable und es scheint die zu enthalten selectedOption im Inneren etwas namens $$childTail

Gibt es eine andere Möglichkeit, auf den selectedOption-Wert zuzugreifen, oder sollte ich die Struktur meiner Ansicht ändern?

Ich habe ein Plunker hier von dem, was ich versuche zu tun.

Answer 1

Die Antworten von Mathew Berg und Bumblebee Man sollten funktionieren, aber sie erklären nicht, was passiert.

Okay, im Grunde läuft es so ab:

Die Tabset-Direktive, die Sie verwenden, tut dies transclusion Die selectedOption befindet sich also tatsächlich in einem inneren Bereich (im Bereich des Tabsets) und nicht im Cope Ihres TabsDemoCtrl. Diese Antwort erklärt, was Transklusion bewirkt und wie Sie auf ein transkludiertes Modell zugreifen können.

Transclusion erstellt flache Kopien Ihrer Modelle, selbst wenn Sie die ausgewählte Option wie initiieren $scope.selectedOption = "5"; In Ihrem TabsDemoCtrl zeigt Ihre Auswahl 5 als am Anfang ausgewählt an, aber Änderungen werden nicht auf den Bereich Ihres TabsDemoCtrl-Controllers übertragen, da im untergeordneten Bereich des Tabsets nur 5 kopiert wird und der zu aktualisierende Bereich im Bereich des Tabsets und nicht in Ihrem Bereich liegt.

Sie können auch ein Objekt für das Modell Ihrer Auswahl verwenden.Da durch die Transklusion eine flache Kopie erstellt wird, werden Objekte/Arrays/Funktionen nach Referenz und Variablen nach Wert kopiert.Dies ist auch der Grund, warum Sie vom inneren Bereich aus auf den Schaltflächenklick Ihrer TabsDemoCtrl zugreifen können.

plnkr mit einer anderen alternativen Lösung (der Objektversion) aktualisiert:

ein Objekt in Ihrem Controller erstellt

$scope.selection = {};

und in einem solchen Modell verwendet

ng-model="selection.option"

http://plnkr.co/edit/5sI0arorV9dULzaDxRra?p=preview

Answer 2

Die Angular-UI-Tab/Tabset-Direktive erstellt neue Bereiche. Um also auf den übergeordneten Bereich zuzugreifen (was Sie tun möchten), hängen Sie einfach $parent an

<select name="selectedCampaign" ng-model="$parent.selectedOption" ng-options="option for option in options"></select>

Aktualisierter plunkr: http://plnkr.co/edit/BgMMn4tJRWm72ZXeQG3N

Answer 3

Bearbeiten:Entschuldigung, ich habe die Frage falsch verstanden. Können Sie das nicht einfach tun? Das?

<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick(selectedOption)">Click</button>

$scope.buttonClick = function(selectedOption) {
  selectedOption.whatever...
}