CODEWITHSUNDEEP
htmlangularjs
Mathemats
Mathemats

Reputation: 1185

array of select - ngOptions

I am using an ng-repeat to generate some data (username, login, role and actions). Each dropdown (role) has the same list of options.

Expected output : Expected output

Each row of data can have a different selected option (like the image) and a service call is made whenever a change is made to save the change.

My problem is that I can't choose different options for each row. Because they are all bound to the same ng-model, they all detect the change and all change to the new option.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Username</th>
      <th>Role</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr data-ng-repeat="participant in model.participantData">
      <td>{{participant.DisplayName}}</td>
      <td>{{participant.UserLogin}}</td>
      <td>
        <label for="{{participant.ParticipantID}}" class="sr-only">
          Choose a role
        </label>
        <select id="{{participant.ParticipantID}}" data-ng-options="role.RoleID as role.RoleName for role in model.rolesData" data-ng-change="roleChanged(participant)" data-ng-model="model.chosenRole">
        </select>
      </td>
      <td>
        <span aria-hidden="true" class="fa fa-minus-circle clickable"</span>
        <span class="sr-only">Delete group member</span>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 42

Answers (1)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Instead of giving same model , Give them model by ng-repeat instance

Like this 

data-ng-model="participant.chosenRole"

Select will be 

<select 
    id="{{participant.ParticipantID}}" 
    data-ng-options="role.RoleID as role.RoleName for role in model.rolesData" 
    data-ng-change="roleChanged(participant)" 
    data-ng-model="participant.chosenRole">
</select>

You can get selected value of each row from model.participantData

Upvotes: 2

Related Questions