javascript - AngularJS 多选使用 ng-repeat

Question

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

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

下面是代码的设置方式(同样，我是 AngularJS/JavaScript 和网络服务的新手，所以请多多包涵)。

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”中，它现在显示为选中

标记