AngularJS选择预选不起作用

13 浏览
0 Comments

AngularJS选择预选不起作用

尽管对象相等,但预选择在选择字段中不起作用:


todo.assignee 包含一个用户对象,该对象应该与 users 中的一个对象匹配。

似乎 Angular 没有意识到来自 todo.assignee 的用户对象包含在 users 中。我能手动执行这个映射吗?

选择框显示时没有选中任何值。我可以选择一个用户(从 users 中)并保存记录,没有任何问题。

控制器

$scope.todos = Todo.query();
$scope.users = User.query();

更新

根据评论的要求。给定对象的结构:

$scope.todos

[

{

"id": 157,

"description": "我的描述0",

"deadline": 1392073200000,

"assignee": {

"id": 34,

"name": "用户1",

"email": "user1@hotmail.com"

},

"comment": "我的评论0",

"done": true

}

...

]

$scope.users

[

{

"id": 34,

"name": "用户1",

"email": "user1@hotmail.com"

},

{

"id": 35,

"name": "用户2",

"email": "xxc@gmail.com"

},

{

"id": 36,

"name": "用户3",

"email": "xx@hotmail.com"

}

]

选择框的作用域来自 repeat:


                    

0
0 Comments

问题的出现原因是ng-model绑定的值是todo.assignee,而不是todo.assignee.id。解决方法是在ng-options中使用"track by user.id"来确保ng-model的值与select选中的值一致。

以下是整理好的文章:

在AngularJS中,当我们使用

解决方法就在于ng-options中的"track by user.id"。通过这种方式,我们可以确保ng-model绑定的值与select选中的值一致。

更多关于ngOptions的信息,请参考官方文档:[https://docs.angularjs.org/api/ng/directive/ngOptions](https://docs.angularjs.org/api/ng/directive/ngOptions)

希望这对其他人有所帮助!需要注意的是,ng-model的值必须是对象的引用,而不是todo.assignee.id的引用。

0
0 Comments

AngularJS Select preselect not working问题的原因是todo.assignee是一个包含用户对象的变量,而options的value是user.name字符串,一个对象和一个字符串是无法匹配的。解决方法是将ng-model中的todo.assignee改为todo.assignee.name,并使用ng-options="user.name as user.name for user in users"。

UPDATE: 更新了答案,使用ng-options="user.name as user.name for user in users"。

完整的答案如下:


Plnkr:

http://plnkr.co/edit/A1XdMYmACNCr3OwBuFhk?p=preview

select as label for value in array

label:这个表达式的结果将作为元素的标签。表达式很可能会引用value变量(例如value.propertyName)。

你可以在这里查看:

http://docs.angularjs.org/api/ng.directive:select

UPDATE2: 修复了副作用,可以使用具有分离值和显示名称的选项。


Plnkr:

http://plnkr.co/edit/6tzP9ZexnYUUfwAgti9b?p=preview

Explanation: 解释原理

之前的情况是,当你选择一个选项时,它会将选项的值赋给模型todo.assignee.name,所以只改变了名字。

todo.assignee.name = "User 3" // 类似这样
todo.assignee // 没有改变id和email
/* {"id": 34,
    "name": "User 1",
    "email": "user1.com"} */

但现在的情况是,

当你选择一个选项时,它将对象值赋给模型todo.assignee,所以你可以得到你想要的。
todo.assignee.name = { 
    "id": 36,
    "name": "User 3",
    "email": "user3.com"
} // 类似这样
todo.assignee // 现在整个值都改变了
/* {"id": 36,
    "name": "User 3",
    "email": "user3.com"} */

这并没有解决问题。我尝试过了。我还在select后面添加了{{ todo.assignee.name }},它正确显示了名字。

非常感谢你的帮助。现在预选择起作用了。但是它有一个副作用。它会创建无效的对象。我期望todo.assignee中的完整用户对象会被更改,但实际上只有名字会被更改,类似这样。所以我需要在后台修复这个问题(根据名字设置正确的对象),这有点丑陋。

再次更新我的回答~

恐怕这会导致另一个问题。值现在是一个字符串而不是一个对象。所以我更喜欢后处理选择的方法。我认为我的场景应该不是那么少见,所以我对Angular不能处理这个问题感到惊讶。

我添加了一些解释。不要害怕。这并不可怕,这是一个常见的解决方案。你可以参考这个链接:

stackoverflow.com/questions/18647098

0