ng-Optionen ergeben zwei separate divs

Question

Ich habe eine Auswahl mit ng-Optionen, um Ergebnisse zu liefern. Ich kann es bekommen, eines der JSON-Elemente zu einem Div zu produzieren, aber ich kann es nicht scheinen, es für ein anderes zu tun. Was vermisse ich?

HTML-Code:

<table class="table"> 
          <tr> 
           <td class="select_container"> 
            <select class="form-control" ng-model="selectedOption_1" ng-options="select_array.value as select_array.displayName for select_array in select_array"></select> 
           </td> 
           <td colspan="2">{{selectedOption_1}}</td> 
           <td colspan="3">{{selectedOption_1}}</td> 
          </tr> 
         </table> 

Angular Code:

$scope.select_array = [ 
    {value: '1', region:'London', displayName: 'display_1'}, 
    {value: '2', region:'London', displayName: 'display_2'}, 
    {value: '3', region:'London', displayName: 'display_3'}, 
]; 

$scope.selectedOption_1 = '123,285'; 

Also, was ich möchte passieren haben, ist, wenn Sie eine Option auswählen, hat es Wert in der ersten div bevölkert, und Region in der zweiten. Ändern Sie diese Daten basierend auf der ausgewählten Option. Vielen Dank im Voraus für jeden Hinweis.

Answer 1

Versuchen Sie dies, Sie werden Ihr gesamtes Objekt als Wert einer Option zuordnen.

<table class="table"> 
          <tr> 
           <td class="select_container"> 
            <select class="form-control" ng-model="selectedOption_1" ng-options="select_array as select_array.displayName for select_array in select_array"></select> 
           </td> 
           <td colspan="2">{{selectedOption_1.value}}</td> 
           <td colspan="3">{{selectedOption_1.region}}</td> 
          </tr> 
         </table>