javascript - 将下拉框选择绑定(bind)到另一个对象的 Id

Question

我有一个对象列表 admins，其中包含一个 Username 和 Id 属性。在 dropdown 中，我只显示 Username 属性。如果用户现在选择管理员，我想将 Id(不是用户名)存储到另一个对象 settings:

到目前为止，这是我尝试过的:

<select class="input-large" ng-model="vm.settings.selectedAdminId">
    <option ng-repeat="admin in vm.admins | orderBy:'Username'">{{admin.Username}}</option>
</select>

我可以选择一个用户名，但我不知道如何将所选的 admin.Id 存储到 settings.selectedAdminId

Answer 1

首先使用ngOptions .然后就是

<select class="input-large" 
    ng-model="vm.settings.selectedAdminId"
    ng-options="admin.Id as admin.Username for admin in vm.admins | orderBy:'Username'">
</select>

angular.module('demo', []).controller('DemoController', function() {
  this.admins = [
    {Id: 123, Username: 'Thomas'},
    {Id: 344, Username: 'Mann'}
  ]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoController as vm">
  <select class="input-large" 
    ng-model="vm.settings.selectedAdminId" 
    ng-options="admin.Id as admin.Username for admin in vm.admins | orderBy:'Username'">
  </select>
  
  <p>Selected: {{ vm.settings.selectedAdminId }}</p>
</div>