テーブルを再作成する方法ドロップダウン選択に基づく列

Question

Angular JSを使用してテーブルを動的に表示しています。 これは作業効率が良い

最初にページがロードされると、銀行価値に基づいて4番目の列（ドメイン）が表示されます。

ドロップダウンをFinanceに変更した場合、第4列の下に財務値を表示する方法はありますか？

テーブルを再作成する必要はありますか？

マイコード

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="myapp" ng-controller="FirstCtrl"> 
    <table border="1"> 
     <tr> 
     <th ng-repeat="(key, val) in collectioninfo[0]"> 
      <span ng-if="allDropDownsHere.indexOf(key)>=0"> 
       <select ng-change="getchange(selectItem)" ng-model="selectItem" ng-init="selectItem = key"> 
        <option>{{key}}</option> 
        <option ng-repeat="(k, v) in val[0]" value="{{k}}">{{k}}</option> 
       </select> 
      </span> 
      <span ng-if="allDropDownsHere.indexOf(key)<0"> 
      {{ key }} 
      </span> 
     </th> 
     </tr> 
     <tr ng-repeat="row in collectioninfo"> 
     <td ng-repeat="(key2, val2) in row"> 
      <span ng-if="allDropDownsHere.indexOf(key2)>=0"> 
      {{ getFirstKeyOfDropDown(val2) }} 
      </span> 
      <span ng-if="allDropDownsHere.indexOf(key2)<0"> 
      {{ val2 }} 
      </span> 
     </td> 
     </tr> 
    </table> 
</div> 

http://jsfiddle.net/h6atm89o/7/

Answer 1

ng-repeatは独自のスコープを作成するために、あなたの価値dropdownlistのselectItemは、それが現在所属するng-repeatブロックの外に到達することはできません。

解決策はコントローラに定義する必要がある変数をdropdownlistにバインドして、ng-repeatの値がtrになるようにすることです。その後、あなたは

val2[0][selectItem.selectItem] 

で列ヘッダで選択した内容に基づいてデータを表示することができます例jsfiddleを参照してください。