Question

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

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

以下是代码的设置方式（同样，我是AngularJS / JavaScript和webservices的新手，请耐心等待。）

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

这是该页面的屏幕截图。这是它的外观：

再次，它起作用，并且当我拉起页面时“有时”，下面的＆lt; pre＆gt;中列出的项目框实际上是在下拉列表中突出显示的，但不经常。我不明白如何确保它们突出显示。在图片中，我手动点击了这些元素。但是，如果我刷新页面，有时它们是，有时它们不是。

Answer 1

我想我明白了。 Per 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;            
});

如果多选列表的项目包含在＆＃34; user.userGroups＆＃34;

中，它现在显示为已选中的项目。

标记

Answer 2

我想我已经明白了。

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

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

以下是相关的选择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调用。我得跑，但我可以稍微回答一下问题。

AngularJS使用ng-repeat进行多选

2 个答案: