AngularJS选择预选不起作用 [英] AngularJS Select preselect not working

问题描述

即使对象相等，预选也不会在选择字段中起作用：

Preselection is not working in the select field even though the objects are equal:

<select ng-show="isEditMode(todo.id)" id="assignee" name="assignee" 
        ng-model="todo.assignee" required 
        ng-options="user.name for user in users">
</select>

todo.assignee包含一个用户对象，该对象应与用户对象匹配。

todo.assignee contains a user object, which should match one from users.

似乎Angular无法识别来自todo.assignee的User对象包含在用户中。我可以手动执行此映射吗？

It seems that Angular does not recognize that the User object from todo.assignee is contained in users. Can I perform this mapping manually?

显示的选择没有选中任何值。我可以选择一个用户（来自用户）并保存记录没有任何问题。

The select is shown with no value selected. I can choose a user (from users) and save the record without any problem.

控制器

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

更新

根据评论中的要求。给定对象的结构：
$ scope.todos

 [
{
    "id": 157,
    "description": "my description 0",
    "deadline": 1392073200000,
    "assignee": {
        "id": 34,
        "name": "User 1",
        "email": "[e-mail]"
    },
    "comment": "my comment 0",
    "done": true
}
...
]

$ scope.users

[
{
    "id": 34,
    "name": "User 1",
    "email": "[e-mail]"
},
{
    "id": 35,
    "name": "User 2",
    "email": "[e-mail]"
},
{
    "id": 36,
    "name": "User 3",
    "email": "[e-mail]"
}
]

选择的范围来自重复：

<tr ng-repeat="todo in todos | filter:query | filter:{assignee:queryAssignee} | filter:queryDone" ng-class="{danger: isDue(todo)}">
                    <td>

推荐答案

根据你的描述：

todo.assignee包含一个用户对象

todo.assignee contains a user object

但你的选项'值是 user.name 字符串，一个对象和一个字符串永远不会匹配。

But your options' value are user.name strings, one object and one string will never be matched.

所以，替换

ng-model="todo.assignee"

到

ng-model="todo.assignee.name"

更新：

使用 ng -options =user.name as user.name for users in users

完整答案：

<select ng-show="isEditMode(todo.id)" 
    ng-model="todo.assignee.name" required 
    ng-options="user.name as user.name for user in users">
</select>

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

label：此表达式的结果将是element的标签。表达式很可能是指值变量（例如value.propertyName）。

label: The result of this expression will be the label for element. The expression will most likely refer to the value variable (e.g. value.propertyName).

你可以在这里引用：
http://docs.angularjs.org/api/ng.directive:select

要修复副作用，您可以使用带有分隔值和显示名称的选项

To fix the side effect, you can use option with separated value and display name

<select ng-model="todo.assignee" required>
    <option ng-repeat="user in users" value="{{user}}" ng-selected="todo.assignee.name === user.name">
        {{user.name}}
    </option>
</select>

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

之前：

当你选择其中一个选项时，它会为模型todo.assignee.name分配选项值，所以只更改名称。

When you select one of option, it assign option value to model todo.assignee.name, so only change the name.

todo.assignee.name = "User 3" // like this

todo.assignee // didn't change the id & email
/* {"id": 34,
    "name": "User 1",
    "email": "[e-mail]"} */

但是，现在：

When you select one of option, it assign object value to model todo.assignee, so let what you want.

todo.assignee.name = { 
    "id": 36,
    "name": "User 3",
    "email": "[e-mail]"
} // like this

todo.assignee // now change the whole value
/* {"id": 36,
    "name": "User 3",
    "email": "[e-mail]"} */

这篇关于AngularJS选择预选不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！