将下拉框选择绑定到另一个对象的ID

时间:2016-05-27 11:56:36

标签: javascript angularjs

我有一个对象列表admins,其中包含UsernameId属性。在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

2 个答案:

答案 0 :(得分:2)

首先使用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>

答案 1 :(得分:1)

你可以这样做

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    // compile 'org.apache.httpcomponents:httpclient:4.3.6'
    // compile 'org.apache.httpcomponents:httpmime:4.2.6'
    compile fileTree(dir: 'libs', include: ['*.jar'])


    compile('org.apache.httpcomponents:httpmime:4.3.6') {
        exclude module: 'httpclient'
    }

compile 'com.google.android.gms:play-services-location:8.3.0'
compile 'com.android.support:multidex:1.0.0'
compile 'com.android.support:appcompat-v7:23.3.0'
compile 'org.jsoup:jsoup:1.7.1'
compile 'com.google.code.gson:gson:2.2.4'
compile 'org.apache.commons:commons-lang3:3.1'
compile 'org.apache.commons:commons-collections4:4.0'
compile 'com.google.android.gms:play-services:8.4.0'
compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.3'
compile 'com.facebook.android:facebook-android-sdk:3.23.1'
compile 'com.github.manuelpeinado.fadingactionbar:fadingactionbar:3.1.2'
compile 'com.android.support:recyclerview-v7:23.3.0'
compile 'com.etsy.android.grid:library:1.0.5'
compile 'com.astuetz:pagerslidingtabstrip:1.0.1'
compile 'com.melnykov:floatingactionbutton:1.3.0'
compile 'org.apache.httpcomponents:httpclient-android:4.3.5'
compile 'com.android.support:design:23.3.0'