Javascript 使用ng repeat的AngularJS多选

我不熟悉AngularJS和JavaScript。我想出了一个方法来建立一个多选列表，这是可行的。与下拉列表关联的ng模型是“用户”DTO对象的一部分，特别是包含用户可以属于的“组”数组的成员。使用Web服务从数据库表中读取可能组的“主列表”，并将其放入数组中，这就是在显示页面时用于构建下拉列表的内容

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

下面是代码的设置方式（同样，我对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>

集团成员资格：
{{group.name}
{{user.userGroups.toString（）}}

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

<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>

$http({
方法：“GET”，
url:“/pkgAART/rs/ApproverGroupService/approvergroups”，
数据：{
应用程序ID:3
}
}).成功（功能（结果）{
//从组中创建一个数组以供使用
//在组的多选择UI组件中
var-arr=[]；
对于（变量i=0；i

这是该页面的截图。这就是它的样子：

---

同样，它是有效的，“有时”当我打开页面时，下方框中列出的项目实际上会在下拉列表中突出显示，但并不经常。我不知道如何确保它们突出显示。在图片中，我手动单击了这些元素。但是如果我刷新页面，有时是，有时不是。

我想我找到了答案

$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;            
});

首先，您应该在选择中使用ng选项，而不是在

上重复使用ng选项。这样，选项将绑定到选定对象的模型

看看这把小提琴：

以下是相关的选择html：

---

我想我找到了答案。根据Peter的建议，我将下拉列表改为ng选项，但修改了用作选项的数组，只使用名称字符串。这是HTML

集团成员资格：
{{user.userGroups.toString（）}}

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

<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>

$http({
方法：“GET”，
url:“/pkgAART/rs/ApproverGroupService/approvergroups”，
数据：{
应用程序ID:3
}
}).成功（功能（结果）{
//从组中创建一个数组以供使用
//在组的多选择UI组件中
var-arr=[]；
对于（变量i=0；i

现在，如果多选列表的项目包含在“user.userGroups”中，它将显示为选中的项目

---

马克

谢谢。实际上，当我使用时，它会将一个对象数组分配给“user.userGroups”。user.userGroups是一个模型，实际上需要以字符串数组结尾（例如“Michigan”、“Texas”、“Florida”）。相反，它最终是一个对象数组，对应于我在上面的代码中构建的“$scope.approverGroups”。因此，如果我选择“Texas”和“Florida”，user.userGroups将得到一个大小为2的数组，其中包含对象{id:10001，name:“Texas”}和对象{id:10002，name:“Florida”}。我需要它在user.userGroups中填充字符串“Texas”和“Florida”。