Inside a JSON file, there is an array that needs to be iterated within <td> tags. The functionality entails creating a table based on user input, which includes the number of rows, input columns, and output columns provided by the user. Three arrays - $rootScope.input_columns, $rootScope.output_columns, and $rootScope.rows - store the data needed to construct the table. However, the array within input_columns containing necessary information fails to populate row cells as intended.
Controller:
var app = angular.module('rulesApp');
app.controller('myController2', ['$scope', '$rootScope',function($scope, $rootScope){
var inputcol=[];
$rootScope.input_col=$scope.no_of_input;
$rootScope.output_col=$scope.no_of_output;
$rootScope.rows=$scope.no_of_row;
for(var i=0;i<$rootScope.input_col;i++){
inputcol.push({
id: inputcol.length,
dropped: false,
dataType:'',
name:'',
type:'input',
path:'',
rowCellValue:[],
rowCellValueOutput:[]
});
}$rootScope.input_columns=inputcol;//here i get input_columns json, Similarly json are made for output_columns and rows
$scope.statementSelected = function(branch, selected_branches) {
if(branch.selected) {
for(var i = 0; i < $rootScope.input_columns.length; i++) {
//Here i add an array inside input_columns.rowCellValue $rootScope.input_columns[i].rowCellValue.push($rootScope.rows[i].rowCellValue);
}
})
Sharing the structure of input_columns
https://i.sstatic.net/Ad36L.png
The HTML code:
<tbody>
<tr ng-repeat="row in rows"><!--It iterates on row json -->
<td><input type="checkbox"></td>
<!--Here i want that in row cells input_columns.rowCellValue data gets populate on row cell for input column --<
<td ng-repeat="col in input_columns.rowCellValue">{{(col == "") && "<enter data>" || (col.split("/")[3])}}</td>
<!--Here i want that in row cells output_columns.rowCellValueOutput data gets populate on row cell for output column -->
<td ng-repeat="col in output_columns.rowCellValueOutput" ng-click="openDialog($event)">{{(col == "") && "<enter data>" || (col.split("/")[3])}}</td>
</tr>
</tbody>
Desired table structure: https://i.sstatic.net/gfV7S.png
Current issue results in blank rows: https://i.sstatic.net/y1Uul.png
Seeking assistance in accessing input_columns.rowCellValue values. Could two ng-repeat loops solve this issue? One for input_column value and another for rowCellValue?
An attempted solution:
Modified HTML code snippet:
<tbody>
<tr ng-repeat="row in rows"><!--It iterates on row json -->
<td><input type="checkbox"></td>
<!--Here i want that in row cells input_columns.rowCellValue data gets populate on row cell for input column -->
<!--here with $index I am getting first value of rowCellValue in entire column can I iterate it using rows length -->
<td ng-repeat="col in input_columns">{{(col.rowCellValue[$index] == "") && "<enter data>" || (col.rowCellValue[$index].split("/")[3])}}</td>
<!--Here i want that in row cells output_columns.rowCellValueOutput data gets populate on row cell for output column -->
<td ng-repeat="col in output_columns" ng-click="openDialog($event)">{{(col.rowCellValueOuput[$index] == "") && "<enter data>" || (col.rowCellValueOutput[$index].split("/")[3])}}</td>
</tr>
</tbody>
Actual table result for input_column: https://i.sstatic.net/0m9R6.png
Current outcome: https://i.sstatic.net/hWrq4.png
Seeking guidance on iterating col.rowCellValueOutput[$index] with the row length instead of $index, for each column. Any suggestions?