AngularJS：选择不是2路绑定到模型答案

【问题标题】：AngularJS: Select not 2-way binding to modelAngularJS：选择不是2路绑定到模型
【发布时间】：2013-10-24 21:21:51
【问题描述】：

我正在使用选择来显示客户端名称。用户应该能够选择现有客户端，然后更新范围属性：

控制器

初始化“第一选择”。

if($scope.clients.length > 0) $scope.existingClient = $scope.clients[0];

查看

<select
    id='nm-existing-client-name'
    class='form-control  input-lg'
    ng-model='existingClient'
    ng-options="client.name for client in clients">
</select>

范围属性existingClient在“选择”菜单更改时不会更改。如果没有初始化任何值（上面的控制器行被删除），existingClient 的值将保持未定义。

附加ng-change 将在值更改时触发，但模型本身不会更新为新值。

我正在使用 AngularJS v1.2.0-rc.3。

【问题讨论】：

你能提供一个小提琴吗？
如果像 demo 这样简单，似乎工作得很好。我会说还有其他东西干扰了您的代码。
@Yoshi 我也这么认为。我没有看到控制台中抛出任何错误。现在我会做一些更深入的调试，因为我可以看到我正确使用了 ng-options/ng-model。

标签： javascript angularjs angularjs-scope

【解决方案1】：

我认为您可能正在使用子范围并且不知道它。 ng-if、ng-repeat、ng-switch 和 ng-include 都创建子作用域。您的作用域上的值是继承的，但如果您更改子作用域中的值，它会在子作用域上设置一个值，并在父作用域上保持继承的值不变。尝试使用一个对象来保存您的值，看看是否可以解决它。由于您只是在对象上设置属性而不是直接在范围上设置值，因此它将使用父范围的继承对象并更新值。

$scope.data = {
    existingClient: $scope.clients.length > 0 ? $scope.clients[0] : undefined
};

查看：

<select ng-model="data.existingClient" 
        ng-options="client.name for client in clients">
</select>

您可以使用 chrome 中的 AngularJS Batarang extension 来帮助调试您的示波器。

【讨论】：

我在更高的块中使用了ng-if，它正在创建一个新的范围。感谢您的帮助。
我在 ng-include 中进行了选择，它创建了一个新范围，您的解决方案有效
ng-switch 也创建了一个新范围，ng-repeat 也是如此。
哇，这个见解非常有用。当 Angular 隐式创建子作用域时，这很难诊断。谢谢。
如果它对任何人有帮助，我发现我的作用域嵌套了两层。试试 ng-model="$parent.$parent.myVariable" 看看。创建子作用域有什么好处？

【解决方案2】：

这也是将参数保存在 $scope 对象中的一种解决方案：

控制器：

$scope.scope = $scope;
$scope.clients = [];
$scope.existingClient = $scope.clients.length > 0 ? $scope.clients[0] : undefined;

查看：

<select ng-model="scope.existingClient" ng-options="client.name for client in clients"></select>

【讨论】：

这并没有真正帮助。
你知道这个答案是 3 岁吗？ xD