Come accedere all'opzione selezionata dal tasto del controller sul clic in AngularJS?

Question

Ho un campo Seleziona con un attributo ng-model in una scheda all'interno del tabset UI-Bootstrap.C'è anche un pulsante sulla scheda.Su clic del pulsante, vorrei ottenere il valore selezionato nel modello.Ho provato a usare

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

.

e poi nel controller

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

.

Ma ciò non sembra contenere il valore.Ho provato a guardare nella variabile $scope e sembra contenere il selectedOption all'interno di qualcosa chiamato $$childTail

C'è qualche altro modo per accedere al valore selezionato o dovrei cambiare la struttura della mia opinione?

Ho un plunker qui > di cosa sto cercando di fare.

.

Answer 1

Le risposte dell'uomo di Mathew Berg e Bumblebee dovrebbero funzionare ma non spiegano cosa sta succedendo.

Okay fondamentalmente va giù come questo:

La direttiva TabSET utilizzata da transclusion in modo che la selezione sia effettivamente effettivamente in un ambito interno (scope di Tabset), non nella Cope di TabsDeMoctrl. Questa risposta spiega cosa fa il transclusione e Come è possibile accedere a un modello transcluso.

Transclux crea copie poco profonde dei tuoi modelli, quindi anche se si avvia l'opzione selezionata come $scope.selectedOption = "5"; nella tua tabsdemoctrl, la selezione mostrerà 5 come selezionato all'inizio ma le modifiche non si rifletteranno allo scopo del tuo controller di TabsDemoctrl perché nel figlio dei tabset Scope 5 viene appena copiato, e quello che viene aggiornato è nella scope del tabset non del tuo scopo.

È inoltre possibile utilizzare un oggetto per il modello della selezione. Poiché la Transclux crea una copia superficiale, oggetti / array / funzioni sono copiati per riferimento e le variabili vengono copiate per valore. Questo è anche il motivo per cui è possibile accedere al pulsante del pulsante TabsDeMoctrl clicca dall'ambito interno.

Aggiornato PLNKR con un'altra soluzione alternativa (la versione dell'oggetto):

ha creato un oggetto nel tuo controller

$scope.selection = {};

.

e utilizzato in modello come questo

ng-model="selection.option"

.

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

Answer 2

La scheda UI angolare / Direttiva Tabset crea nuovi ambiti, quindi per accedere all'ambito dei genitori (ciò che stai cercando di fare) basta allegare $ genitore

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

.

Aggiornato Plunkr: http://plnkr.co/edit/bgmmn4tjrwm72zxeqg3n

Answer 3

Modifica: scuse, mi impegno la domanda, non riesci a fare solo ?

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

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

.