Setting option selected in dropdown list using angular

Question

I have a dropdownlist as follows:

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

in my controller method which populates the dropdwnlists is as follows:

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

where userType consist of data like :

[{"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}]

My problem is that I get multiple dropdownlists generated accordingly with the roles associated but no option is pre selected.Can anyone help me out with that.

I have referred the question How to set a selected option of a dropdown list control using angular JS ,but the solution didn't work for me.

It looks like rolesList[$index] contains an array of roles (based on your example of userType data). Since you are setting ng-model=rolesList[$index] the chosen value will never be the entire array of roles but rather just a single role. If you add a selectedRole[] scope variable and change your ng-model to point to that, then add "track by role.id" to your ng-options it should work properly. — Scott, Oct 14 '14 at 19:45

score 1 · Accepted Answer · answered Oct 15 '14 at 12:23

I figured out that angular compares objects by their reference and not their content.My drop down list gets populated by an object from roles so what i did was to pass the matching reference to the ng-model=rolesList. The solution which worked is as follows:

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

score 0 · Answer 2 · answered Jul 31 '18 at 06:37

0

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

answered Jul 31 '18 at 06:37

Amir Touitou

3,141
1
35
31

Setting option selected in dropdown list using angular

2 Answers2