Javascript 使用Angular.js动态添加表列

我正在尝试使用Angular.JS向html表动态添加列

它从一组数据开始，我想在单击时提供额外的数据。我对Angular是个新手，我制作了这个plunker来说明我要做的事情。我（显然）只想根据数组中的项数添加一个新的表头和一个新的表数据，与同一行的索引号匹配。多谢各位

控制器：

function Ctrl($scope) {
$scope.data = [];
$scope.data[3] = [];
$scope.data[0] = [['New York', 1000,2000],['Los Angeles', 200,400],['Nottingham', 800,400]]
$scope.moredata = [1500, 2500, 4500];
temp = []
$scope.getData = function() {
  $scope.moduleArray[1] = $scope.moredata;
}
$scope.moduleArray = $scope.data;
}

HTML:

获取更多数据
位置
当前数据
新数据
2[0]{{item2[0]}
2[1]{{item2[1]}
{{bat[$parent.$index]}

---

这里有一个非常简单的设置，可以切换右侧的单个列

有两组数组，一组用于列标题，另一组用于行数据。 它使用

limito

过滤器进行

ng repeat

在此基础上，对范围变量

colCount

进行简单的递增/递减，以添加/删除列

看法

请注意，对于大型表，由于有多个嵌套的中继器，这可能对性能影响不大

---

这里有一个非常简单的设置，可以切换右侧的单个列

有两组数组，一组用于列标题，另一组用于行数据。 它使用

limito

过滤器进行

ng repeat

在此基础上，对范围变量

colCount

进行简单的递增/递减，以添加/删除列

看法

请注意，对于大型表，由于有多个嵌套的中继器，这可能对性能影响不大

---

添加/删除列是否总是按顺序在右侧进行？如果是这样，那么每次列更改时映射新的子数组并使用列长度确定数组长度并每次从数据中删除不需要的内容会很简单吗？添加/删除列是否总是按顺序在右侧进行？如果是这样的话，那么每次列更改时映射新的子数组并使用列长度确定数组长度以及每次从数据中删除不需要的内容将非常简单谢谢charlieftl。问题是，我正在进行API调用以获取额外的数据，以便设置更改，而不是原始数组的一部分。感谢你的帮助我不太清楚…原来的问题也不是很具体。谢谢，你已经回答了我的问题和我发布的问题（对于一个noob来说通常是不同的）。我需要在外部阵列上使用Limito，这现在是有意义的。谢谢你，谢谢你。问题是，我正在进行API调用以获取额外的数据，以便设置更改，而不是原始数组的一部分。感谢你的帮助我不太清楚…原来的问题也不是很具体。谢谢，你已经回答了我的问题和我发布的问题（对于一个noob来说通常是不同的）。我需要在外部阵列上使用Limito，这现在是有意义的。谢谢

<div ng-controller="Ctrl">
  <button ng-click="getData()">Get more data</button>
  <table>
  <tr>
      <th>Location</th>    
      <th>Current Data</th> 
      <th ng-repeat="ba in moduleArray[1]">new data</th>    
  </tr>
  <tr data-ng-repeat="item2 in moduleArray[0]">   
      <td>2[0]{{item2[0]}}</td>  
            <td>2[1]{{item2[1]}}</td>   
      <td data-ng-repeat="bat in moduleArray[1]">{{bat[$parent.$index]}}</td>
  </tr>
</table>

  <button ng-click="increment('up')">Add Column</button>
  <button ng-click="increment('down')">Remove Column</button>
  <table class="table table-bordered">
    <tr>
      <th ng-repeat="col in cols | limitTo: colCount">{{col}}</th>
    </tr>
    <tr ng-repeat="row in data">
      <td ng-repeat="item in row | limitTo: colCount">{{item}}</td>
    </tr>
  </table>

  // used as limit for ng-repeat limitTo
  $scope.colCount = 3;

  $scope.increment = function(dir) {
    (dir === 'up') ? $scope.colCount++: $scope.colCount--;
  }

  $scope.cols = // array of column names
  $scope.data = // row data arrays