how to create rows and columns s based on inputs

hi am learning angular js ,here i got a tricky question and i am not able to find out the logic any one please help me

i have 3 feilds and textboxes

no of shelves- here user giving 2

rows- here 2

coloms- here 3

if i click save automaticaly rows and coloms created for 2 shelves

how to do this in angular js

Please check below this is maybe helpful for you

html code
"add-row" ng-controller="MainCtrl">
"setupNewGrid">
"text" name="totaladdrow" ng-model="totaladdrow" name="" placeholder="Column Name">
class="addfields" ng-click="addNewColumn()">Add Columsn
"column in columns">
"text" name="columnName" ng-model="column.name" name="" placeholder="Column Name">
"text" ng-model="column.dataFormat" name="" placeholder="Data Format" >
"text" ng-model="column.excludedChar" name="" placeholder="Exculded Characters">
class="remove" ng-click="removeColumn($index)">x
javascript code
var app = angular.module('add-row', []);
app.controller('MainCtrl', function($scope) {
$scope.columns = [{colId: 'col1', name:'', dataType:'', dataFormat:'' }];
$scope.addNewColumn = function() {
var newItemNo = $scope.columns.length+1;
for(var i =1; i<= parseInt($scope.totaladdrow);i++) {
$scope.columns.push({'colId':'col'+newItemNo});
}};
$scope.removeColumn = function(index) {
// remove the row specified in index
$scope.columns.splice( index, 1);
// if no rows left in the array create a blank array
if ( $scope.columns.length() === 0 || $scope.columns.length() == null){
alert('no rec');
$scope.columns.push = [{"colId":"col1"}];
}
};
});

Paste this code in given below link and check

https://codepen.io/sandeep821/pen/akPJdG

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Muthu Kumar7y ago
Here is an working example for you.

https://codepen.io/kizmeth/pen/AufCm

https://www.w3resource.com/javascript-exercises/javascript-dom-exercise-7.php
0
Puneet Kankar7y ago
Please check below this is maybe helpful for you
html code

"add-row" ng-controller="MainCtrl">
  "setupNewGrid">

      "text" name="totaladdrow" ng-model="totaladdrow" name="" placeholder="Column Name">
     class="addfields" ng-click="addNewColumn()">Add Columsn

   "column in columns">
      "text" name="columnName" ng-model="column.name" name="" placeholder="Column Name">


     "text" ng-model="column.dataFormat" name="" placeholder="Data Format" >
     "text" ng-model="column.excludedChar" name="" placeholder="Exculded Characters">
     class="remove"  ng-click="removeColumn($index)">x






javascript code



var app = angular.module('add-row', []);

  app.controller('MainCtrl', function($scope) {


$scope.columns = [{colId: 'col1', name:'', dataType:'', dataFormat:'' }];

  $scope.addNewColumn = function() {
    var newItemNo = $scope.columns.length+1;
   for(var i =1; i<= parseInt($scope.totaladdrow);i++) {
     $scope.columns.push({'colId':'col'+newItemNo});
   }};


  $scope.removeColumn = function(index) {
    // remove the row specified in index
    $scope.columns.splice( index, 1);
    // if no rows left in the array create a blank array
    if ( $scope.columns.length() === 0 || $scope.columns.length() == null){
      alert('no rec');
      $scope.columns.push = [{"colId":"col1"}];
    }


  };



});
Paste this code in given below link and check

https://codepen.io/sandeep821/pen/akPJdG
0