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

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

我提到了这个问题 How to set a selected option of a dropdown list control using 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>

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

2 个答案: