使用角度在下拉列表中选择的设置选项

Question

我有一个下拉列表，如下所示：

                         <tr ng-repeat="role in rolesList" align="center">
                        <div class="form-group">
                            <td></td>
                            <td align="center">
                                <select ng-model="rolesList[$index]" class="form-control" ng-change="enableClick()"
                                        ng-options="role.name for role in roles | filter : exclude(rolesList[$index])" style="float:left; width: 340px;" >
                                    <option value="">Select Role to assign</option>

                                </select>

                                <button type="button" class="btn btn-danger btn-sm"
                                        ng-click="removeDropDownList($index)"
                                        style="float:left; position: relative; left: 10px;">

                                    <span class="glyphicon glyphicon-minus"></span></button>
                                <div>&nbsp;<br></div>
                            </td>
                        </div>
                    </tr>

在我的填充dropdwnlists的控制器方法中，如下所示：

  $scope.openUpdateForm = function (userType) {
        $scope.UserTypeDetail.name=userType.name;
        $scope.UserTypeDetail.id=userType.id;
        $scope.rolesList =userType.role;
        for (var j=0;j<userType.role.length;j++) {
            $scope.rolesList[j]=userType.role[j];
        }
        $('#UserTypeModal').modal('show');
    };

其中userType包含以下数据：

[{"id":2,"name":"ADMIN","role":[{"id":2,"name":"ROLE_JOBS_MASTER"},{"id":3,"name":"ROLE_CUSTOMER_CARE"},{"id":4,"name":"ROLE_SMS_TEMPLATE"},{"id":6,"name":"ROLE_CITY_HUBS"},{"id":7,"name":"ROLE_USER"}],"companyId":2},{"id":12,"name":"fvcawds","role":[{"id":6,"name":"ROLE_CITY_HUBS"},{"id":3,"name":"ROLE_CUSTOMER_CARE"}],"companyId":2},{"id":3,"name":"fvcawds5tyre hdh","role":[{"id":6,"name":"ROLE_CITY_HUBS"},{"id":2,"name":"ROLE_JOBS_MASTER"}],"companyId":2}]

我的问题是我得到了与角色相关联的多个下拉列表，但是没有预选任何选项，任何人都可以帮我解决这个问题。

我已经提到了问题如何使用angular JS设置下拉列表控件的选定选项 ，但是该解决方案对我不起作用。

Answer 1

我发现angular是通过对象的引用而不是内容来比较对象的。我的下拉列表是由角色中的对象填充的，所以我要做的就是将匹配的引用传递给ng-model = rolesList。 起作用的解决方案如下：

 $scope.openUpdateForm = function (userType) {
        $scope.UserTypeDetail.name=userType.name;
        $scope.UserTypeDetail.id=userType.id;
        $scope.rolesList = userType.role;
        var roles = [];
        for( var role in $scope.roles){
            for (var availableRole in $scope.rolesList) {
                if($scope.rolesList[availableRole].id == $scope.roles[role].id) {
                    roles.push($scope.roles[role]);
                }
            }
        }
        $scope.rolesList = roles;
        $('#UserTypeModal').modal('show');
    };

Answer 2

<select ng-model="selectedDevice" size="7" single>
 <option *ngFor="let opt of devices" [value]="opt.Address">{{opt.Name}}</option>