AngularJS选择列表与所选项目不匹配

AngularJS Select List doesnt match selected Item

本文关键字：选项 项目 不匹配 选择 列表 AngularJS      更新时间：2023-09-26

我的AngularJS应用程序中有一个全局控制器，它为我提供了一个包含Attendee对象的数组。我想要的是修改我的课程注册模型，它包含一个特定的参与者对象。在编辑窗口中，我想获得一个包含所有可能与会者的下拉列表，而应该选择当前与会者。

我的html中有以下代码：

        <select ng-model="courseRegistration.attendee" ng-options="attendeeSelectItem.name for attendeeSelectItem in attendeeSelectItems"></select>

如果我用JSON.stringify打印出courseRegistration.attendee，并用相应的选项打印出相同的对象（相同的id、相同的名称等）。但如果我对两个相同的对象执行类似（courseRegistration.attendee == attendeeSelectItem）的操作，那么我会得到false。

所以我的问题是，我如何确保当前选择的项目（存储在courseRegistration.attee中）与我的列表中的相应对象（选项使用该对象）匹配？

提前非常感谢。

JSFiddle：http://jsfiddle.net/2ddCy/

问候Marc

本质上，当您使用对象数组来填充选择时，它会选择整个对象，而不仅仅是您在选择列表中看到的一个项目。

有关详细信息和示例代码，请参阅此问题：同时使用ng选项和ng切换时的问题

我假设您的控制器中有以下内容？

$scope.courseRegistration = {attendee: {id: 2, name: "A Person"}}

如果是这样，则比较失败的原因是，尽管对象可能与当前选择的对象具有相同的属性，但它指的是内存中的不同对象，因此不被归类为相等对象。

现在，作为一个快速破解，你可以将它们字符串化，然后进行比较，然而正确的方法是通过键设置当前值：

$scope.courseRegistration = {attendee: attendeeSelectItems[1]};

或者只需存储id/name并将ng-options条件设置为仅绑定到该值：

$scope.courseRegistration = {attendee: 1};
<select ng-model="courseRegistration.attendee" ng-options="attendeeSelectItem.id as attendeeSelectItem.name for attendeeSelectItem in attendeeSelectItems"></select>
相关文章：