CODEWITHSUNDEEP
angularjsselect
Marc
Marc

Reputation: 411

Angular preselect option in a select input

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!

Upvotes: 1

Views: 229

Answers (2)

Saeb Amini
Saeb Amini

Reputation: 24449

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

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

Upvotes: 0

Hadi
Hadi

Reputation: 17299

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>

Upvotes: 1

Related Questions