Question

我在ui-bootstrap的tabset中的选项卡中有一个带有ng-model属性的select字段。选项卡上还有一个按钮。点击按钮，我想获得模型中的选定值。我尝试使用

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

然后在控制器中

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

但这似乎并没有包含价值。我尝试查看$scope变量，似乎在selectedOption内部包含$$childTail

是否有其他方法可以访问selectedOption值，还是应该更改视图的结构？

我有Plunker here我想要做的事情。

Answer 1

Mathew Berg和Bumblebee Man的答案都应该有效，但他们没有解释发生了什么。

好吧基本上这样下去了：

您正在使用的tabset指令transclusion，因此selectedOption实际上位于内部范围（tabset的范围）中，而不是在TabsDemoCtrl的应用中。 This answer解释了转换的作用，以及如何访问已转换的模型。

Transclusion会对模型进行浅层复制，因此即使您在TabsDemoCtrl中初始化选择了$scope.selectedOption = "5";这样的选项，您的选择也会在开始时显示为5，但更改不会反映到您的TabsDemoCtrl控制器＆＃39 ;范围因为在tabset的子作用域5中只是被复制，而正在更新的作用域不在你的作用域范围内。

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

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

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

$scope.selection = {};

并在像这样的模型中使用

ng-model="selection.option"

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

Answer 2

编辑：道歉，我误解了这个问题，你不能只做this吗？

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

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

Answer 3

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

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

3 个答案: