AngularJS 使用 ng-repeat 进行多选

Question

我是 AngularJS 和 JavaScript 的新手。我想出了一种方法来构建一个多选列表，这是有效的。与下拉列表关联的 ng-model 是“用户”DTO 对象的一部分，特别是包含用户可以属于的“组”数组的成员。可能组的“主列表”是使用网络服务从数据库表中读取的，放入一个数组中，这是在显示页面时用于构建下拉列表的内容。

列表中包含在用户对象的“组”字段中的那些元素显示在“预览”字段中的下拉列表下方。这一切正常 - 如果用户有两个选定的组，他们会在页面填充时出现在该预字段中......但我不明白为什么这些组没有在下拉列表中突出显示。 有时他们...有时当我刷新页面时，但大多数时候当页面显示并根据用户信息填充时，用户中包含的这些组在下拉列表中未突出显示.

这是代码的设置方式（再次强调，我是 AngularJS/JavaScript 和 web 服务的新手，所以请耐心等待）。

HTML代码是这样的：

<div class="form-group">
    <label for="Groups" class="col-sm-2 control-label">Group Memberships: </label>
    <div class="col-sm-10">
        <select name="userGroups" id="userGroups" ng-model="user.userGroups" multiple style="width: 300px;">
            <option ng-repeat="group in approverGroups" value="{{group.name}}" selected >{{group.name}}</option>
        </select>
        <pre>{{user.userGroups.toString()}}</pre>
    </div>
</div>

JavaScript 端看起来像这样。 “get”用于从表中读取所有可能的组，并填充下拉列表：

    $http({
        method : 'GET',
        url : '/pkgAART/rs/ApproverGroupService/approvergroups',
        data : {
            applicationId : 3
        }
    }).success(function(result) {
        // Create an array from the groups for use
        // in the multi-select UI component for groups
        var arr = [];
        for (var i = 0; i < result.approvergroup.length; i++) {
            var id = result.approvergroup[i].approverGroupId;
            var value = result.approvergroup[i].name;
            var pair = {id : id, name : value };
            arr.push(pair);
        }
        $scope.approverGroups = arr;
    });

这是页面的截图。看起来是这样的：

所以，它再次起作用，当我拉起页面时，“有时”，在较低的

 框中列出的项目实际上在下拉列表中突出显示，但不经常。我不明白如何确保它们突出显示。在图片中，我手动单击了这些元素。但是如果我刷新页面，有时它们会出现，有时它们不会。
    

Answer 1

我想我明白了。根据 Peter 的建议，我将下拉菜单更改为 ng-options，但修改了我用作选项的数组以仅使用名称字符串。这是 HTML

<div class="form-group">
    <label for="Groups" class="col-sm-2 control-label">Group Memberships:   </label>
    <div class="col-sm-10">
        <select name="userGroups"
                id="userGroups" 
                ng-model="user.userGroups" 
                multiple="true" 
                style="width: 300px;" 
                ng-options="group for group in approverGroups">
        </select>
        <pre>{{user.userGroups.toString()}}</pre>               
    </div>
</div>

构建字符串数组的 js 文件如下所示：

$http({
    method : 'GET',
    url : '/pkgAART/rs/ApproverGroupService/approvergroups',
    data : {
        applicationId : 3
    }
}).success(function(result) {
// create an array from the groups for use
// in the multi-select UI component for groups
    var arr = [];
    for (var i = 0; i < result.approvergroup.length; i++) {
        var value = result.approvergroup[i].name;
        arr.push(value);            
    }
    $scope.approverGroups = arr;            
});

如果多选列表的项目包含在“user.userGroups”中，现在会显示它们已被选中

标记

Answer 2

我想我明白了。

首先，您应该在选择中使用 ng-options，而不是在 <option> 上使用 ng-repeat。这使得选项绑定到选择的模型。

看看这个小提琴：http://jsfiddle.net/mcxqjngm/3/

这里是相关的select html：

<select 
name="userGroups" 
id="userGroups" 
ng-model="user.userGroups" 
multiple="true" 
style="width: 300px;" 
ng-options="group.name for group in approverGroups track by group.id">
</select>

该按钮模仿 ajax 调用。我得跑了，不过我一会儿可以回答问题。