How to use two ng-repeat inside a particular tag

Question

I have a json and inside this json there is an array that I want to iterate in <td>. My functionality is like I have to create a table based on user input. User provides input for number of rows, input columns and output columns. So I have three arrays i.e $rootScope.input_columns, $rootScope.output_columns and $rootScope.rows which contain data provided by user to create the table. Now in input_columns there's an array which contains some information which I need to show on row cell. But with my current code it is giving me blank row.

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

Adding the structure of input_columns

This is my 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 == "") && "&lt;enter data&gt;" || (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 == "") && "&lt;enter data&gt;" || (col.split("/")[3])}}</td>              
    </tr>
</tbody>

I want to get a structure like this

But I am getting blank rows

Please can anyone help me in this task. Is there an issue that I haven't iterated input_columns so i am not getting input_columns.rowCellValue values. How can I get the values of input_columns.rowCellValue in table columns? Is there anyway that I can use two ng repeat, with first ng-repeat i can get input_column value[col in input_column] and with second ng-repeat i can get rowCellValue[cell in col.rowCellValue].?

I was trying some solution and figured out one way to access rowCellValue:

This is the modified 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 -->
<!--here with $index i am getting first value of rowCellValue in entire column can i iterate it with using rows length -->
            <td ng-repeat="col in input_columns">{{(col.rowCellValue[$index] == "") && "&lt;enter data&gt;" || (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] == "") && "&lt;enter data&gt;" || (col.rowCellValueOutput[$index].split("/")[3])}}</td>    

        </tr>
    </tbody>

this the actual table I want for input_column:

But I am getting this:

Can i iterate col.rowCellValueOutput[$index] with row length instead of $index? and for each column. If yes, please suggest some approach for this.

Answer 1

Have you tried putting this into a JSON object and looping through the JSON. It looks like what you are trying to do is, everytime a new row is created, the inputCol and outputCol would be trying to output everything for every row.

//pseudo code
ng-repeat row in rows
    ng-repeat input in inputs
    ng-repeat output in outputs

Everytime you loop through rows, all of inputs and outputs data will be outputted again, making every row the same.

If you made a JSON object and done something like,

ng-repeat row in rows
    ng-repeat input in row.input
    ng-repeat output in row.output

Your JSON would look like

var rows = [{ input: [ "row1", "col2" ], output: [ "col3", "col4" ] },
            { input: [ "row2", "col2" ], output: [ "col3", "col4" ] }];

Answer 2

I found a solution for my problem:

<td ng-repeat="col in input_columns" title="" id="{{col}}">{{(col.rowCellValue[$parent.$index] == "") && "&lt;enter data&gt;" || (col.rowCellValue[$parent.$index].split("/")[3])}}</td>

In controller structure of json was like:

input_column({
rowCellValue[
0:dic2317/fdgdfg3535/accViolation
1:dic2317/sdg3436dg/driver
})

I used $parent.$index for iterating with rows index.