Add table columns dynamically with Angular.js

Question

I'm trying to use Angular.JS to dynamically add columns to an html table.

It starts with a set of data, and I want to make extra data available on a click. I'm new to Angular, and made this plunker to illustrate what I'm trying to do. I'd like to (obviously) just add a new table header and a new table data based on the number of items in the array, matched to the index number of the same row. Thank you

Controller:

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

Will adding/removing columns always be done on the right side in order? If so would be failry simple to map new sub arrays each time columns change and use column length to determine array length and remove what's not needed from data each time — charlietfl
– charlietfl, Commented May 29, 2016 at 0:33

charlietfl · Accepted Answer · 2016-05-29 01:17:17Z

7

Here's very simple set up that toggles single columns on right side.

There are 2 sets of arrays, one for column headers and one for row data. It uses limitTo filter for ng-repeat.

From there it is a simple increment/decrement of a scope variable colCount to add/remove column

View

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

Controller

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

Note that for large tables this may not great for performance due to multiple nested repeaters

DEMO

edited May 29, 2016 at 1:17

answered May 29, 2016 at 1:03

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

phillydigital Over a year ago

THanks charlieftl. the thing is I'm making API calls to get that extra data so that set changes and isn't part of the original array. appreciate your help

charlietfl Over a year ago

Well that isn't very clear to me...and neither is the original question specific enough

phillydigital Over a year ago

Thanks, you've answered both my intended question and the question that I posted (often different for a noob). I needed to use limitTo on the outer array which makes sense now. thanks

Collectives™ on Stack Overflow

Add table columns dynamically with Angular.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related