使用angularjs將數據綁定到下拉列表

Question

我有一個使用下面的init方法的typecript控制器。我能夠在消息結果 中獲得我想要的所有數據，這很好。

  init() { 
        this.accountLocationService.getAccountLocationCollection(this.customerNumber) 
         .success(messageresult => { 
          this.acctLocationCollection = messageresult;          
          //alert(this.acctLocationCollection.accountlocation[0].aliasName); 
         }) 
         .error(error => { 
          alert(error); 
         }); 
       } 

的acctLocationCollection可以有兩個或多個對象，我需要的 的aliasname的所有值綁定在下面一個下拉。 我該如何實現這一目標？這是我的第一個AngularJs項目。

 <div id="acctDetail"> 
      <p>Select an Account:</p> 
      <div class="selectAccount"> 
       <select class="selAccounts" name="DeliverToCustomerNumber" ng-change="" id="DeliverToCustomerNumber" 
         ng-options="ac for ac in alc.acctLocationCollection.aliasName">   
       </select> 
      </div> 
      <div id="address"> 
       <dl> 
        <dd class="acctName">{{alc.acctLocationCollection.DeliverToCompanyName}}</dd> 
        <dd class="acctNo">{{alc.acctLocationCollection.DeliverToCustomerNumber}}</dd>   
       </dl> 
      </div> 
     </div> 

數據看起來像這樣的console.log

object 
    accountlocation:Array[2] 
    0:object 
     aliasName:"1234" 
     deliverToCustomerNumber: "25235" 

    1:object 
     aliasName:"2345" 
     deliverToCustomerNumber: "23523" 

Answer 1

你不要在你的選擇有一個ng-model所以我只是假設你想將對象存儲從acctLocationCollection。要做到這一點，你只需要構建你ng-options如下：

<select class="selAccounts" 
     name="DeliverToCustomerNumber" 
     id="DeliverToCustomerNumber" 
     ng-model="alc.selectedAcctLocation" 
     ng-options="ac as ac.aliasName for ac in alc.acctLocationCollection"> 
</select> 

angular.module('app', []) 
 
    .controller('ctrl', function() { 
 
    this.selectedAcctLocation = {}; 
 
    this.acctLocation = [{ 
 
     aliasName: "1234", 
 
     deliverToCustomerNumber: "25235" 
 
    }, { 
 
     aliasName: "2345", 
 
     deliverToCustomerNumber: "23523" 
 
    }]; 
 
    console.log(this.acctLocation); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl as alc"> 
 
    By object: <select ng-model="alc.selectedAcctLocation" ng-options="ac as ac.aliasName for ac in alc.acctLocation"></select><br/> 
 
    By (key,value): <select ng-model="alc.selectedAcctLocation" ng-options="value as value.aliasName for (key,value) in alc.acctLocation"></select> 
 
    <div style="margin-top:10px;"> 
 
    alc.acctLocation: 
 
    <ul> 
 
     <li ng-repeat="(key,value) in alc.acctLocation">{{key}}: {{value}}</li> 
 
    </ul> 
 
    </div> 
 
    <div>selectedAcctLocation: {{alc.selectedAcctLocation | json}}</div> 
 
</div>