how to display option as selected in select box in angularjs?

Question

I can't set option selected in angularjs

<tr ng-repeat="leader in filtered = (list | orderBy:sort.active:sort.descending) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
    <td>
       <select class="form-control mt10" name="leaderRole" ng-model="leader.role_id" ng-class="{ inputerror: !leader.role_id}">
          <option value="">Please select role</option>
          <option ng-repeat="role in employeeRole" ng-selected="{{leader.role_id == role.id}}" value="{{role.id}}">{{role.description}}</option>
       </select>
    </td>
</tr>

Controller Part

var leaders_list = angular.module('leaders_list'); //getter
leaders_list.controller('LeaderController',['$scope','$http','$filter',LeaderController]);
function LeaderController($scope,$http,$filter)
{
   $scope.list = [
      {
        "title": "XYZ",
        "name_first": "ABC",
        "name_last": "EFG",
        "email": "[email protected]",
        "id": 1,
        "role_id": 3
      }
   ];

  $scope.employeeRole = [
    {
      "id": 2,
      "description": "JKL",
      "is_active": true
    },
    {
      "id": 3,
      "description": "STV",
      "is_active": true
    }
  ];
}

Here leader.role_id is value of role_id for each leader, when i'm doing above code it did not show my value as selected.

If I remove ng-model from select box it will show my value as selected.

Plunker Link: https://plnkr.co/edit/qesu3J6mxJdS6bTjPXKI?p=info

can anyone suggest me how to do this ?

Try removing ng-selected="{{leader.role_id == role.id}}" from <option></option> — Dhaval Marthak
– Dhaval Marthak, Commented Apr 20, 2016 at 5:16
hi @DhavalMarthak , I already tried it but didn't get success. — Sonil Gandhi
– Sonil Gandhi, Commented Apr 20, 2016 at 5:31

JB Nizet · Accepted Answer · 2016-04-20 06:10:27Z

1

You make your own life difficult by not using ng-options as recommended.

Just replace your select with

<select class="form-control mt10" name="leaderRole" 
        ng-model="leader.role_id" ng-class="{ inputerror: !leader.role_id}"
        ng-options="role.id as role.description for role in employeeRole">
  <option value="">Please select role</option>
</select>

https://plnkr.co/edit/fW9O6BCDOl59aziTz7zX?p=preview

answered Apr 20, 2016 at 6:10

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sonil Gandhi Over a year ago

Hi @JB Nizet , thanks for answer. I done this type of things but I'm doing wrong way. <select class="form-control mt10" name="leaderRole" ng-model="leader.role_id" ng-class="{ inputerror: !leader.role_id}" ng-options="role.description for role in employeeRole track by role.id"> <option value="">Please select role</option> </select>

Sonil Gandhi Over a year ago

hi can any one please explain difference. in ng-options="role.description for role in employeeRole track by role.id" and ng-options="role.id as role.description for role in employeeRole".

JB Nizet Over a year ago

As explained in the documentation, if you use role.id as role.description, the model value if the ID, and the displayed value is the description, whereas if you use role.description, the model value is the role itself (i.e. the whole object), and the displayed value is the description. track by is just use to determine how to associate DOM elements with elements of the array, in case you refresh the array.

Collectives™ on Stack Overflow

how to display option as selected in select box in angularjs?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related