Question

我正在尝试使用Angular.JS动态地将列添加到html表中。

它从一组数据开始，我想在点击时提供额外的数据。我是Angular的新手，并且让这个用来说明我正在尝试做什么。我（显然）只是根据数组中的项目数添加一个新的表头和一个新的表数据，与同一行的索引号匹配。谢谢

控制器：

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：

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

Plunkr

Answer 1

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

有两组数组，一组用于列标题，另一组用于行数据。它使用limitTo的{{1}}过滤器。

从那里可以简单地增加/减少范围变量ng-repeat来添加/删除列

查看

colCount

控制器

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

请注意，对于大型表，由于多个嵌套转发器

，这对性能可能不太好

的 DEMO

使用Angular.js动态添加表列

1 个答案: