将下拉框选择绑定到另一个对象的Id(Bind a dropdown box selection to an Id of another object)

将下拉框选择绑定到另一个对象的Id(Bind a dropdown box selection to an Id of another object)

我有一个对象列表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

I have a object list admins which contains a Username and Id property. Within a dropdown, I only display the Username property. If the user now selects an admin, I want to store the Id (not the username) into another object settings:

Here is what I have tried so far:

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

I am able to select a Username but I don't know how to store the selected admin.Id into settings.selectedAdminId

最满意答案

首先使用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> 
  
 
First of all use ngOptions. Then it will be
 
<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>