javascript - 使用 Angular 在下拉列表中选择设置选项

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>

在我的 Controller 方法中，填充 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 色相应生成的多个下拉列表，但没有预先选择任何选项。任何人都可以帮助我解决这个问题。

我已提交问题 How to set a selected option of a dropdown list control using angular JS，但该解决方案对我不起作用。

Answer 1

我发现 Angular 通过引用而不是内容来比较对象。我的下拉列表由 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');
    };