ng-options導致兩個獨立的div

Question

我有一個選擇使用ng-options來提供結果。我可以讓它產生一個json元素到div，但我似乎無法讓它做另一個。我錯過了什麼？

HTML代碼：

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

角代碼：

$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'; 

所以我想有發生什麼事，就是當你選擇一個選項，有它在第一個div填充值，第二個地區。並根據您選擇的選項來更改數據。提前感謝您的任何建議。

Answer 1

試試這個，你會把你的整個對象映射爲一個選項的值。

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