anglejsを使用してデータをドロップダウンにバインドする

Question

以下のinitメソッドを持つtypescriptコントローラがあります。私はmessageresult が欲しいすべてのデータを得ることができます。

  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> 

は、データはあなたの選択にng-modelを持っていないにconsole.log

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

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

Answer 1

でこのようになりますので、私はちょうどあなたがあなたのacctLocationCollectionからオブジェクトを格納すると仮定します。 - あなたは活字体を使用していることから、あなたは `のinit（必要はありません）

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