Comment accéder à l'option sélectionnée à partir du contrôleur en cliquant sur le bouton dans angulairejs ?

Question

J'ai un champ de sélection avec un ng-model attribut dans un onglet du jeu d'onglets de ui-bootstrap.Il y a aussi un bouton sur l'onglet.En cliquant sur le bouton, je souhaite obtenir la valeur sélectionnée dans le modèle.J'ai essayé d'utiliser

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

puis dans le contrôleur

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

Mais cela ne semble pas contenir la valeur.J'ai essayé de regarder dans le $scope variable et il semble contenir le selectedOption à l'intérieur de quelque chose appelé $$childTail

Existe-t-il un autre moyen d'accéder à la valeur selectedOption ou dois-je modifier la structure de ma vue ?

j'ai un Plunker ici de ce que j'essaie de faire.

Answer 1

Les réponses de Mathew Berg et de Bumblebee Man devraient fonctionner, mais elles n'expliquent pas ce qui se passe.

Bon, en gros, ça se passe comme ça :

La directive tabset que vous utilisez fait transclusion donc le selectedOption est en fait dans une portée interne (portée de l’ensemble d’onglets), pas dans la face de votre TabsDemoCtrl. Cette réponse explique ce que fait la transclusion et comment vous pouvez accéder à un modèle transclus.

La transclusion fait des copies superficielles de vos modèles, donc même si vous initialisez l'option sélectionnée comme $scope.selectedOption = "5"; dans votre TabsDemoCtrl, votre sélection affichera 5 comme sélectionné au début, mais les modifications ne seront pas reflétées dans la portée de votre contrôleur TabsDemoCtrl car dans la portée enfant de l'ensemble d'onglets, 5 est simplement copié et celui en cours de mise à jour est dans la portée de l'ensemble d'onglets et non dans votre portée.

Vous pouvez également utiliser un objet pour le modèle de votre sélection.Puisque la transclusion crée une copie superficielle, les objets/tableaux/fonctions sont copiés par référence et les variables sont copiées par valeur.C'est également pourquoi vous pouvez accéder au clic du bouton de votre TabsDemoCtrl depuis la portée interne.

plnkr mis à jour avec une autre solution alternative (la version objet) :

créé un objet dans votre contrôleur

$scope.selection = {};

et utilisé dans un modèle comme celui-ci

ng-model="selection.option"

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

Answer 2

La directive Angular ui tab/tabset crée de nouvelles étendues, donc pour accéder à la portée parent (ce que vous essayez de faire), attachez simplement $parent

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

Plunkr mis à jour : http://plnkr.co/edit/BgMMn4tJRWm72ZXeQG3N

Answer 3

Modifier:Toutes mes excuses, j'ai mal lu la question, tu ne peux pas le faire ce?

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

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