简体   繁体   English

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

[英]AngularJS Select List doesnt match selected Item

I have a global controller in my AngularJS application which provides me with a array containing Attendee objects. 我的AngularJS应用程序中有一个全局控制器,该控制器为我提供了一个包含Attendee对象的数组。 Want i want is to modify my CourseRegistration Model which contains one specific attendee object. 我要修改的是包含一个特定与会者对象的CourseRegistration Model。 In the edit window I d like to get a dropdown with all possible attendees whereas there should be the current attendee selected. 在编辑窗口中,我希望下拉菜单中包含所有可能的与会者,而应该选择当前与会者。

I have the following code in my html: 我的html中有以下代码:

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

If I print out courseRegistration.attendee with JSON.stringify and do the same with the corresponding option they print out the same object (same id, same name etc.). 如果我使用JSON.stringify打印出courseRegistration.attendee并使用相应的选项执行相同操作,则它们将打印出相同的对象(相同的ID,相同的名称等)。 But if I do something like ( courseRegistration.attendee == attendeeSelectItem ) for the two identical objects, then I get false. 但是,如果我对两个相同的对象执行类似( courseRegistration.attendee == attendeeSelectItem )的操作,那么我会得到错误的结果。

So my question is how can I make sure that the currently selected item (stored in courseRegistration.attendee) gets matched with the corresponding object in my list (which is used by options) ? 所以我的问题是如何确保当前选择的项(存储在courseRegistration.attendee中)与列表中的对应对象(由选项使用)相匹配?

Thanks a lot in advance. 非常感谢。

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

Greets Marc 马克·马克

Essentially when you use an array of objects to populate a select, it selects the entire object, not just the one item you're seeing in the select list. 本质上,当您使用对象数组来填充选择时,它会选择整个对象,而不仅仅是选择列表中显示的一项。

See this question for detail and example code: Problems when using ng-options and ng-switch together 有关详细信息和示例代码,请参见此问题: 一起使用ng-options和ng-switch时遇到的问题

I'm assuming that you've got something like the following in your controller? 我假设您的控制器中有类似以下内容的东西?

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

If so, the reason the comparison fails is that although the object may have the same properties as the one currently selected, it refers to a different object in memory and therefore isn't classed as equal. 如果是这样,则比较失败的原因是,尽管该对象可能具有与当前选择的对象相同的属性,但它引用了内存中的另一个对象,因此没有被归类为相等。

Now as a quick hack you could stringify them and then compare, however the correct approach would be either to set the current value by key: 现在,作为一个快速技巧,您可以对它们进行字符串化处理然后进行比较,但是正确的方法是要么通过密钥设置当前值:

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

Or just store the id/name and set your ng-options condition to bind to just that value: 或者只是存储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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM