如何在 angularjs 中单击按钮时从控制器访问所选选项？

Question

我有一个选择字段 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 值还是应该更改视图的结构？

我有一个 笨蛋在这里 我正在尝试做的事情。

Answer 1

马修·伯格和大黄蜂人的答案都应该有效，但他们没有解释发生了什么。

好吧，基本上它是这样的：

您正在使用的 tabset 指令确实 transclusion 所以 selectedOption 实际上位于内部范围（选项卡集的范围）中，而不是在 TabsDemoCtrl 的范围中。 这个答案 解释了嵌入的作用以及如何访问嵌入模型。

嵌入会生成模型的浅层副本，因此即使您初始化了选定的选项，例如 $scope.selectedOption = "5"; 在 TabsDemoCtrl 中，您的选择将在开始时显示 5，但更改不会反映到您的 TabsDemoCtrl 控制器的范围，因为在选项卡集的子范围中，仅复制了 5，并且正在更新的范围位于选项卡集的范围而不是您的范围中。

您还可以将对象用于您选择的模型。由于嵌入创建了浅复制，因此对象/数组/函数通过引用复制，变量通过值复制。这也是您可以从内部范围访问 TabsDemoCtrl 按钮单击的原因。

使用另一个替代解决方案（对象版本）更新了 plnkr ：

在你的控制器中创建了一个对象

$scope.selection = {};

并在这样的模型中使用

ng-model="selection.option"

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

Answer 2

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

Answer 3

编辑：抱歉，我看错了问题，你就不能这样做吗 这?

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

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