AngularJS选择预选不起作用

Dan*_*iel 0 javascript angularjs

即使对象相等,预选在选择字段中也不起作用:

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

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

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

显示选择时未选择任何值.我可以选择一个用户(来自用户)并保存记录没有任何问题.

调节器

$scope.todos = Todo.query();
$scope.users = User.query();
Run Code Online (Sandbox Code Playgroud)

更新

按照评论中的要求.给定对象的结构: $ scope.todos

 [
{
    "id": 157,
    "description": "my description 0",
    "deadline": 1392073200000,
    "assignee": {
        "id": 34,
        "name": "User 1",
        "email": "user1@hotmail.com"
    },
    "comment": "my comment 0",
    "done": true
}
...
]
Run Code Online (Sandbox Code Playgroud)

$ scope.users

[
{
    "id": 34,
    "name": "User 1",
    "email": "user1@hotmail.com"
},
{
    "id": 35,
    "name": "User 2",
    "email": "xxc@gmail.com"
},
{
    "id": 36,
    "name": "User 3",
    "email": "xx@hotmail.com"
}
]
Run Code Online (Sandbox Code Playgroud)

选择的范围来自重复:

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

Che*_*Lin 5

根据你的描述:

todo.assignee包含一个用户对象

但是您的选项值是user.name字符串,一个对象和一个字符串永远不会匹配.

所以,替换

ng-model="todo.assignee"
Run Code Online (Sandbox Code Playgroud)

ng-model="todo.assignee.name"
Run Code Online (Sandbox Code Playgroud)

更新:

使用 ng-options="user.name as user.name for user 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>
Run Code Online (Sandbox Code Playgroud)

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

选择作为数组中值的标签

label:此表达式的结果将是元素的标签.表达式很可能是指值变量(例如value.propertyName).

你可以在这里参考:http://docs.angularjs.org/api/ng.directive: select

UPDATE2:

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

<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>
Run Code Online (Sandbox Code Playgroud)

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

说明:

之前:

当您选择其中一个选项时,它会将选项值分配给model todo.assignee.name,因此只需更改名称.

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

todo.assignee // didn't change the id & email
/* {"id": 34,
    "name": "User 1",
    "email": "user1@hotmail.com"} */
Run Code Online (Sandbox Code Playgroud)

但现在:

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": "user3@hotmail.com"
} // like this

todo.assignee // now change the whole value
/* {"id": 36,
    "name": "User 3",
    "email": "user3@hotmail.com"} */
Run Code Online (Sandbox Code Playgroud)