Question

我有多个选择框供用户选择他的角色。

<select ng-options="role.name for role in roles"
        ng-model="user.roles"
        multiple="multiple">
</select>

“roles” - 是用户可以选择的角色列表

[{"id":1,"name":"Moderator"},{"id":2,"name":"Admin"}]

“user.roles” - 用户实际拥有的角色列表

{"id":5,"email":"la@la.la","roles":[{"id":2,"name":"Admin"}]}

“角色”和“用户”都是通过ajax动态加载的。问题是当我加载已经有角色的用户时 - 它们不会在选择框中自动选中。我如何选择它们？

Answer 1

好的，我找到了解决方案。如果有人可以建议更好的解决方案，请发布

用于检查角色是否存在于给定角色数组中的函数

$scope.isRoleContains = function(roles, roleToFind) {
    var is = false;
    angular.forEach(roles, function(role) {
        if (role.name == roleToFind.name)
            is = true;
    });
    return is;
}

更新了选择框

<select ng-model="user.roles" multiple="multiple">
    <option ng-repeat="role in roles" ng-selected="isRoleContains(user.roles, role)">
        {{ role.name }}
    </option>
</select>

Answer 2

我认为唯一的问题是角色不应该只包含密钥。

"roles":[{"id":2}]

以下是使用多选的方式：http://jsfiddle.net/vYaNx/3/

您需要拥有数据中选择的内容。 User.roles应该是选定的数据。

HTML：

<select multiple ng:model="selectedColors" ng:options="k as v for (k, v) in colors"></select>

使用Javascript：

$scope.colors = {
    b: 'black',
    w: 'white',
    r: 'red',
    c: 'cyan',
    y: 'yellow'
  };
  $scope.selectedColors = ['r', 'c'];

Answer 3

你的角度是什么版本？

在角度1.0.X中，角度检查项目是否严格等于（因此角色必须是ng-model中的相同实例和数组中的选定项目）。

如果您使用更新版本的angular（1.2.x），则可以在ng-option中使用'track by'：

<select
    ng-options="role.name for role in roles track by role.name"
    ng-model="user.roles"
    multiple>
</select>

看到这个小提琴：http://jsfiddle.net/qJLwp/2

Answer 4

H i，把它扔进混合物中：

DEMO： http://jsfiddle.net/rq2ky/1/

关键是设置ng-options（声明键值是什么）

   <select 
        multiple="multiple" 
        ng-options="obj.name as obj.name for obj in roles" 
        ng-model="user.roles">
</select>

AngularJS - 模型和选项不同时的多选选项

4 个答案: