Angular preselect option in a select input

Question

I'm a bit at a loss here. I have an array of teammembers. Each teammember has a roleId. I also have an array of roles. Each role has an id. I loop over the teammembers and, for each teammember, I display their name and a select with all roles. That works fine. I am unable to have the current teammember's role preselected in the select.

This is my data struct:

teamMembers = [
               {id,100,name:John,roleId,19},
               {id,101,name:Sue,roleId,20},
               ...
              ]
roles = [
          {id:19,name:'Administrator'},
          {id:20,name:'Superuser'},
          ...
        ]

html:

<tr ng-repeat="teamMember in data.team.MEMBERS">
    <td>
        {{teamMember.firstName}} {{teamMember.infix}} {{teamMember.lastName}}</td>
<td>
    <select
        ng-model="teamMember.roleId"
        ng-options="role.systemName for role in data.roles track by role.id">
    </select>
</td>

What I want is that initially the select displays the role where teamMember.roleId == role.id. Also, the 2 way databinding should update the teamMembr.roleId such that it always equals the currently selected role.id.

Is it possible to do this in Angular 1.5.0? If so, how?

Thank you for any tips!

Hadi · Accepted Answer · 2016-04-30 15:50:55Z

1

try like this

var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
  $scope.open = false;
 $scope.teamMembers = [{id:100,name:'John',roleId:19},{id:101,name:'Sue',roleId:20}];
$scope.roles = [{id:19,name:'Administrator'},{id:20,name:'Superuser'}];
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  <table>
    <tr ng-repeat="teamMember in teamMembers">
    <td>
        {{teamMember.name}} </td>
<td>
    <select
        ng-model="teamMember.roleId"
        ng-options="role.id as role.name for role in roles">
    </select>
</td>
  </table>
   
</div>

answered Apr 30, 2016 at 15:50

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

Comments

Saeb Amini · Accepted Answer · 2016-04-30 15:59:31Z

0

Shouldn't role.systemName be role.name in ng-options?

Use as to bind to the id property of role:

<select
    ng-model="teamMember.roleId"
    ng-options="role.id as role.name for role in data.roles track by role.id">
</select>

answered Apr 30, 2016 at 15:59

Saeb Amini

24.6k10 gold badges85 silver badges78 bronze badges

Collectives™ on Stack Overflow

Angular preselect option in a select input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related