2

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 值，或者我应该更改视图的结构？

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

4

3 回答 3

4

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

好的，基本上它会像这样下降：

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

嵌入会生成模型的浅拷贝，因此即使您像$scope.selectedOption = "5";在 TabsDemoCtrl 中那样初始化选定选项，您的选择也会在开始时显示 5，但更改不会反映到 TabsDemoCtrl 控制器的范围，因为在选项卡集的子范围中，5 只是复制，并且正在更新的那个在标签集的范围内，而不是您的范围内。

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

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

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

$scope.selection = {};

并在这样的模型中使用

ng-model="selection.option"

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

于 2014-06-02T19:47:28.013 回答
2

编辑：抱歉，我误读了这个问题，你不能这样做吗？

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

$scope.buttonClick = function(selectedOption) {
  selectedOption.whatever...
}
于 2014-06-02T19:27:31.447 回答
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

于 2014-06-02T19:38:08.553 回答