Incorporate an additional column into a table using AngularJS

Question

Incorporate an additional column into a table using AngularJS

I attempted to insert a new column upon clicking a button, but unfortunately, I was unsuccessful. I have created a JSFiddle demo to illustrate my issue. Any assistance in resolving this problem would be greatly appreciated.

Below is my attempt:

$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);
      }
  };

javascript angularjs loops

Answer 1

Answer №1

Check out this live example in action using the JSFiddle link.

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

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

  var data = [];

  // Let's generate some sample 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);
  }

  // Function to increment column count
  $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>

Answer 2

Check out this live example in action using the JSFiddle link.

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

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

  var data = [];

  // Let's generate some sample 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);
  }

  // Function to increment column count
  $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>

Incorporate an additional column into a table using AngularJS

Answer №1

Similar questions

Issues with the functionality of the asynchronous socket.io JavaScript callback are being experienced

Tips for updating Vuex getter value during Vue testing?

Issue occurs when nested functions prevent the data() variable from updating

Issue with Angular Material date picker

Concealing certain options in a dropdown list with jQuery Chosen

Tips for preventing issues with Javascript latency causing flash out during page loading in Chrome

I just installed Electron on my Mac using the command 'sudo npm install electron -g', but now I am encountering an error. How can I resolve this issue

Detecting Android devices

Implementing AngularJS html5mode alongside nodeJS and Express

What is the best way to invoke my Python function within my JavaScript file?

Verify if the input field is devoid of any content or not

Error in Next.js PDFtron Webviewer: ReferenceError - 'window' is not defined

Storing iteration outputs in multiple lists or dataframe columns: A Python guide

Applying Styles to Cells Using the Google Sheets API (v4)

What is the process for verifying the ongoing sessions within a particular set of classes?

Issue with React form not appearing on web browser

JQuery selecting and highlighting a row within a dynamically loaded table via ajax

After removing an element from an array in Vue.js, how can we adjust its class to reflect the change?

What steps are necessary to modify my AngularJS routes to a file?param1=a&param2=b structure?

Employing promises for retrieving ajax data