Question

所以我有一个像这样的控制器

  app.controller("ReservationCtrl", function($scope) {

    $scope.rooms = [{id: 1, name: "Room 1"}, {id: 2, name: "Room 2", }];
    $scope.reservation = {id: 1, time: "9AM", room: {id: 2, name: "Room 2"}};

});

看起来像这样的视图：

<select ng-model="reservation.room" ng-options="room as room.name for room in rooms"></select>

问题是除非我说

，否则选择框不会绑定到正确的房间

$scope.reservation.room = $scope.rooms[1];

这对于开发来说相当不方便，因为房间不是reservation模型上唯一需要绑定到选择框的字段。如何在不执行此额外步骤的情况下应用绑定？

此外，如果我执行类似

的操作，绑定会再次中断

$http.get("/reservation/2").success(function(data) { $scope.reservation = angular.copy(data); });

Answer 1

我认为这是因为，

如果您选择一个选项，则ng-options中的

，所选值为对象

EX ：如果选择第一个选项，则模型值是一个对象，它是$scope.rooms（{id: 1, name: "Room 1"}）中的第一个元素。

对象是引用类型数据类型。所以它的作用是如果对象创建一次，那么它的所有用法都指向该对象。看看这个article。

因此，您选择的值是一个引用类型的对象。在您的情况下，您有$scope.reservation.room的两个独立对象和{id: 2, name: "Room 2"}数组中的rooms。请注意它们位于分开的内存插槽中。

在您的工作案例中，$scope.reservation.room数组中的{id: 2, name: "Room 2"}和rooms都指向同一个内存插槽，因为您将两者等于$scope.reservation.room = $scope.rooms[1];意味着$scope.reservation.room＆amp; $scope.rooms[1]两者都指向内存中的同一个对象。

要解决这个问题，您可以采取与工作解决方案不同的方法。

更改ng-repeat，如下所示

...ng-options="room.id as room.name for room in rooms"...

并更改ng-model

....ng-model="reservation.id"....

如果选择第一个选项，则会选择该选项的id作为 EX 的选定值，然后模型值为1，即id 1}}第一个选项。

在这种情况下，所选模型值是原始（like 1,2,3..）类型数据，然后它不会搜索内存中的对象，而是获取堆栈的值并检查选项值并选择正确的值

这里是DEMO，这将最初选择第二个选项。

----------------------------------------------- - 摘要 ---------------------------------------- ---------

如果所选模型值为object，则它将检查所选对象的内存地址和$scope.rooms的所有对象，并检查是否存在匹配元素并选择匹配选项如果找到一个。如果没有人找到，那么什么都不会选择。

如果模型值像1,2,3..这样是原始值，它会搜索该值并检查是否有任何匹配的option value如果找到，它将选择该选项。

Answer 2

所以看起来这个问题的关键是track by指令中的ng-options子句。查看我的updated fiddle 正如您将看到的，整个模型正在更新，而不仅仅是其ID。文档说select as和track by并不是一起使用的，但他们用来说明这一点的例子与我的有点不同。

由于迄今为止我没有收到官方Angular渠道对此事的任何反馈意见，我将此标记为已解决并继续进行。

感谢大家的帮助。

AngularJS选择框在更改模型时不更新

2 个答案: