Binding Daten zu einem Dropdown mit angularjs

Question

Ich habe einen Typoskript-Controller mit einer Init-Methode unten. Ich bin in der Lage, alle gewünschten Daten in das Nachrichtenergebnis zu bekommen, was gut ist.

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

Die acctLocationCollection kann unter allen Werten des aliasname in einem Drop-Down zu binden, hat zwei oder mehr Objekte und ich brauche. Wie kann ich das erreichen? Dies ist mein erstes AngularJs-Projekt.

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

Daten sieht wie folgt in console.log

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

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

Answer 1

Sie haben kein ng-model auf Ihrem wählen haben, so dass ich nur annehmen, dass Sie das Objekt aus Ihrem acctLocationCollection speichern möchten. Um dies zu tun müssen Sie einfach Ihre ng-options strukturieren wie folgt:

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