CODEWITHSUNDEEP
angularjshtml-table
Dhruvil21_04
Dhruvil21_04

Reputation: 2189

Angular: Create dynamic table of n x n when size is selected by the user

Update:

I'm new to Angular. I'm using 1.7.7 version.

What I'm looking for is this:

Whenever I select a specific value let's say n from the select list (please refer code snippet), it should display a table of n x n. Whenever the user changes the value of the select list again, then the new table should replace the previous one. Please, let me know if anything is unclear. Thanks in advance!

const app = angular.module('grad-table',[]);

app.controller('mainCtrl',function($scope){
  $scope.dimen;
  $scope.n = 10;
  $scope.max = 100;
  $scope.getNum = function(){
    arr = [];
    for(i = 2 ; i <= $scope.max; i++) {
      arr.push(i);
    }
    //console.log(arr);
    return arr;
  }();
  $scope.getCol = function(){
    arr = [];
    count = 0;
    for(i = 1; i <= $scope.dimen; i++) {
      j = Math.floor(i/26); // used to calculate first Alphabet in two letter column name
      if(i <= 26) {
        arr.push(String.fromCharCode(64+i)); // For A-Z one character
      } else if(i % 26 == 0) {
        arr.push(String.fromCharCode(64+j-1,64+(i-26*(j-1)))); // For last Z in two character
      }
      else {
        arr.push(String.fromCharCode(64+j,64+(i-26*j)));
      }
    } 
    console.log(arr);
    return arr;
  };
  $scope.getRow = function(){
    arr = [];
    for (i = 1; i <= $scope.dimen; i++) {
      arr.push(i);
    }
    console.log(arr);
    return arr;
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="grad-table">
<head>
<title>Page Title</title>
</head>
<body ng-controller="mainCtrl">
  <h1 class="title">Angular</h1>
  <form>
    Select Dimensions (2-100):<br>
    <select ng-model="dimen" ng-change="getCol();getRow();">
      <option value="">--Select--</option>
      <option ng-repeat="n in getNum" value={{n}}>
        {{n}}
      </option>
    </select>
  </form>
  <h3>{{dimen}}</h3>
  <table>
      <tr>
        <th ng-repeat="c in getCol">{{c}}</th>
      </tr>
    <tr>
      <td ng-repeat="r in getRow">{{r}}</td>
    </tr>
  </table>
</body>
</html>

Upvotes: 1

Views: 94

Answers (1)

NTP
NTP

Reputation: 4448

Because the $scope you use as function parameters are different from the $scope that you define on top of your controller. Removing the $scope parameters solves the issue.

Since getRow and getCol are functions your ng-repeats should be in the following format

<table>
    <tr>
        <th ng-repeat="c in getCol()">{{c}}</th>
    </tr>
    <tr>
      <td ng-repeat="r in getRow()">{{r}}</td>
    </tr>
</table>


const app = angular.module('grad-table',[]);

app.controller('mainCtrl',function($scope){
  $scope.dimen;
  $scope.n = 10;
  $scope.max = 50;
  $scope.getNum = function(){
    arr = [];
    for(i = 2 ; i <= 100; i++) {
      arr.push(i);
    }
    //console.log(arr);
    return arr;
  }();
  $scope.getCol = function(){
    arr = [];
    count = 0;
    for(i = 1; i <= $scope.dimen; i++) {
      j = Math.floor(i/26); // used to calculate first Alphabet in two letter column name
      if(i <= 26) {
        arr.push(String.fromCharCode(64+i));
      } else {
        arr.push(String.fromCharCode(64+j,64+i-26*j));
      }
    } 
    //console.log(arr);
    return arr;
  };
  $scope.getRow = function(){
    arr = [];
    for (i = 1; i <= $scope.dimen; i++) {
      arr.push(i);
    }
    //console.log(arr);
    return arr;
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="grad-table">
<head>
<title>Page Title</title>
</head>
<body ng-controller="mainCtrl">
  <h1 class="title">Angular</h1>
  <form>
    Select Dimensions (2-100):<br>
    <select ng-model="dimen" ng-change="getCol()">
      <option value="">--Select--</option>
      <option ng-repeat="n in getNum" value={{n}}>
        {{n}}
      </option>
    </select>
  </form>
  <h3>{{dimen}}</h3>
  <table>
    <thead>
      <tr>
        <td ng-repeat="c in getCol()">{{c}}</td>
      </tr>
    </thead>
    <tr>
      <td ng-repeat="r in getRow()">{{r}}</td>
    </tr>
  </table>
</body>
</html>

Upvotes: 1

Related Questions