Angularjs 如何基于下拉选择重新创建表列

我使用Angular JS动态显示一个表。 这很好

最初加载页面时，将根据银行值显示第四列（域）

如果我们将下拉列表更改为Finance，如何在第四列下显示Finance值

我们需要重新创建表吗

我的代码

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

{{key}}
{{k}
{{key}}
{{getFirstKeyOfDropDown（val2）}
{{val2}}

---

由于

ng repeat

将创建自己的作用域，因此在

ng repeat

块当前所属的

dropdownlist

之外无法访问您的值

selectItem

解决方案是，您必须将控制器中应定义的变量绑定到

dropdownlist

，以便在

tr

的

ng repeat

中达到其值。然后，您可以根据您在列标题处选择的内容显示数据

val2[0][selectItem.selectItem]

---

参考示例

动态工作非常好，感谢您的辛勤/聪明工作。