Как получить доступ к выбранной опции из контроллера при нажатии кнопки в angularjs?
-
20-12-2019 - |
Вопрос
У меня есть поле выбора с ng-model
атрибут на вкладке в наборе вкладок ui-bootstrap.На вкладке также есть кнопка.При нажатии на кнопку я хотел бы получить выбранное значение в модели.Я пробовал использовать
<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick()">Click</button>
а затем в контроллере
$scope.buttonClick = function() {
//try to access $scope.selectedOption
}
Но это, похоже, не содержит значения.Я попытался заглянуть в $scope
переменная, и она, по-видимому, содержит selectedOption
внутри чего-то, что называется $$childTail
Есть ли какой-либо другой способ получить доступ к значению selectedOption или я должен изменить структуру моего представления?
У меня есть Поршень здесь о том, что я пытаюсь сделать.
Решение
Ответы Мэтью Берга и человека-шмеля должны сработать, но они не объясняют, что происходит.
Ладно, в принципе, все происходит примерно так:
Директива tabset, которую вы используете, выполняет transclusion
таким образом, selectedOption на самом деле находится во внутренней области (область tabset), а не в вашем TabsDemoCtrl cope. Этот ответ объясняет, что делает transclusion и как вы можете получить доступ к transcluded модели.
Transclusion создает неглубокие копии ваших моделей, так что даже если вы инициализируете выбранную опцию, например $scope.selectedOption = "5";
в вашем TabsDemoCtrl ваш select покажет 5, как было выбрано в начале, но изменения не будут отражены в области вашего контроллера TabsDemoCtrl, потому что в дочерней области набора вкладок 5 просто скопировано, а обновляемая область находится в области набора вкладок, а не в вашей области.
Вы также можете использовать объект для выбранной вами модели.Поскольку при преобразовании создается неглубокая копия, объекты/массивы/функции копируются по ссылке, а переменные копируются по значению.Это также причина, по которой вы можете получить доступ к кнопке TabsDemoCtrl, нажав на нее во внутренней области.
обновлен plnkr с помощью другого альтернативного решения (объектная версия) :
создал объект в вашем контроллере
$scope.selection = {};
и используется в модели, подобной этой
ng-model="selection.option"
Другие советы
Директива Angular ui tab/tabset создает новые области, поэтому для доступа к родительской области (что вы пытаетесь сделать) просто прикрепите $parent
<select name="selectedCampaign" ng-model="$parent.selectedOption" ng-options="option for option in options"></select>
Обновленный plunkr: http://plnkr.co/edit/BgMMn4tJRWm72ZXeQG3N
Редактировать:Прошу прощения, я неправильно понял вопрос, не могли бы вы просто сделать этот?
<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick(selectedOption)">Click</button>
$scope.buttonClick = function(selectedOption) {
selectedOption.whatever...
}