Add a column to a table with AngularJS

Question

I tried to add a column if a button is pressed, but with no success. I made a JSFiddle example with my problem. I would be very thankful if someone could help me with this problem.

This is my try:

$scope.addValue = function() {
      $scope.headers.push('new header');
      var users = 5;
      for(var i = 0; i < users; i++) {
          var rowData = [];
          for (var j = 0; j < 1; j++) {
              rowData.push('data i=' + i + ' j=' + j)
          }
          $scope.data.push(rowData);
      }
  };

Possible duplicate of How to dynamically add a new column to an HTML table — Rahul Bharadwaj
– Rahul Bharadwaj, Commented Mar 23, 2017 at 7:35
can you update your jsfiddle link? seems you posted a wrong link — Sabrina Luo
– Sabrina Luo, Commented Mar 23, 2017 at 7:37

Mistalis · Accepted Answer · 2017-03-23 08:56:45Z

1

Here is a working example based on this JSFiddle.

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.headers = [];
  $scope.data = [];
  $scope.colCount = 3;

  var data = [];

  // populate demo data
  for (var i = 0; i < 10; i++) {
    $scope.headers.push('Col ' + (i + 1));
    var rowData = [];
    for (var j = 0; j < 10; j++) {
      rowData.push('Row-' + (i + 1) + ' - Col ' + (j + 1))
    }
    data.push(rowData);
  }

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

  $scope.data = data;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <button ng-click="increment('up')">Add Column</button>
  <button ng-click="increment('down')">Remove Column</button>
  <table>
    <tr>
      <th ng-repeat="h in headers | limitTo: colCount">{{h}}</th>
    </tr>
    <tr ng-repeat="row in data">
      <td ng-repeat="item in row | limitTo: colCount">{{item}}</td>
    </tr>
  </table>
</div>

answered Mar 23, 2017 at 8:56

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

1 Comment

quma Over a year ago

I know, this was the basic of my example. but what I would need is a simple function where to put in data and column is than added.

Collectives™ on Stack Overflow

Add a column to a table with AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related