对 Angular 和 html 下拉菜单感到困惑

Question

试图弄清楚这一点令人沮丧。 尝试用下拉菜单替换 3 个复选框。

复选框完美运行。当您更新用户时，它会正确地为数据库提供数据，当您再次返回编辑时，它会根据您之前选择的内容选中正确的框。下拉菜单不是这种情况。我似乎无法让它工作。它不会自动在下拉列表中选择保存的值，当我在下拉列表中选择一个值并保存时，它不会被写入数据库。我使用了复选框代码中的所有信息，所以我不确定它为什么不起作用。

我喜欢 DROPDOWN v2.0 的简单性，但我需要在角色中添加文本。Id 就像在复选框和下拉 v1.0 代码中一样。这在 ng-option 中是否可行？

复选框

<div ng-repeat="role in ctrl.userRoleEdits">
    <div class="checkbox checkbox-inline">
        <input id="role{{role.Id}}" type="checkbox" name="role{{role.Id}}" ng-model="role.Selected" />
        <label for="role{{role.Id}}" class="short">{{role.Name}}</label>
    </div>
</div>

DROPDOWN v1.0

<select class="form-control">
    <option ng-repeat="role in ctrl.userRoleEdits" id="role{{role.Id}}" name="role{{role.Id}}" ng-model="role.Selected">{{role.Name}}</option>
</select>

DROPDOWN v2.0

<select class="form-control" ng-model="role.Selected" ng-options="role as role.Name for role in ctrl.userRoleEdits track by role.Id"></select>

Answer 1

嗯嗯……

我相信 role.Selected 是角色 id...

如果是这样：

对于 DROPDOWN v1.0，ng-model 应该与这样的标签保持一致：

    <select class="form-control" ng-model="role.Selected">
        <option ng-repeat="role in ctrl.userRoleEdits" value="role.Id" id="role{{role.Id}}" name="role{{role.Id}}">{{role.Name}}</option>
    </select>

2017-01-13 10:25 编辑：添加value="role.Id"

2017-01-13 10:27

在 DROPDOWN v2.0 中，ng-model 需要匹配 userRoleEdits 对象之一。然后它将显示所选内容。

表示如果 userRoleEdits 中的对象是这样的：

{
    Id: 1,
    Name: 'role 1'
}

那么对于 DROPDOWN v2.0，role.Selected 应该是相同的结构。 Id 和 Name 都应该相同，以便下拉菜单将其显示为已选择。