AngularJS选择预选不起作用
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:
问题的出现原因是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的引用。
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