select - ngOptions数组

时间:2015-11-09 01:55:27

标签: html angularjs

我正在使用ng-repeat来生成一些数据(用户名,登录,角色和操作)。每个下拉列表(角色)都有相同的选项列表。

预期输出:Expected output

每行数据都可以有不同的选定选项(如图像),只要进行更改以保存更改,就会进行服务调用。

我的问题是我不能为每一行选择不同的选项。因为它们都绑定到相同的ng模型,所以它们都检测到更改以及对新选项的所有更改。

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

1 个答案:

答案 0 :(得分:2)

不是给出相同的模型,而是通过ng-repeat实例

给他们模型

喜欢这个

data-ng-model="participant.chosenRole"

选择将

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

您可以从model.participantData

获取每行的选定值