CODEWITHSUNDEEP
javascriptangularjsdynamic-tablesnested-table
Chthonic One
Chthonic One

Reputation: 233

How do you place a table into another table with a variable number of rows and columns in Angularjs?

I am trying to create a dynamic table mapping a set of enemy courses of actions in the columns to friendly courses of actions in the rows. Each cell in the table will have a 2x2 matrix with each cell showing the number of friendly casualties, ammo loss, fuel loss, and equipment loss. All cells cross each course of action will be filled with a 2x2 table.

I understand basically how to use ng-repeat, and I think that I will have to create a new table object in the HTML inside each cell, however whenever I try to do anything funny with the rows, they break.

I apologize if my code is a mess, but I am relatively new to javascript.

Here is my HTML:

<div ng-controller="MyCtrl">
  <table border="1">
    <tr>
        <th>Mission</th>
        <th ng-repeat="column in cols">{{column}}</th>
    </tr>
    <tr>
      <td/>
      <td>
        <input type="radio" name="colButtonL" ng-click="updateMostPredictionFactor('most_likely1')"> Most Likely<br>
        <input type="radio" name="colButtonD" ng-click="updateMostPredictionFactor('most_dangerous1')"> Most Dangerous<br>
      </td>
      <td>
        <input type="radio" name="colButtonL" ng-click="updateMostPredictionFactor('most_likely2')"> Most Likely<br>
        <input type="radio" name="colButtonD" ng-click="updateMostPredictionFactor('most_dangerous2')"> Most Dangerous<br>
      </td>
      <td>
        <input type="radio" name="colButtonL" ng-click="updateMostPredictionFactor('most_likely3')"> Most Likely<br>
        <input type="radio" name="colButtonD" ng-click="updateMostPredictionFactor('most_dangerous3')"> Most Dangerous<br>
      </td>
      <td>
        <input type="radio" name="colButtonL" ng-click="updateMostPredictionFactor('most_likely3')"> Most Likely<br>
        <input type="radio" name="colButtonD" ng-click="updateMostPredictionFactor('most_dangerous3')"> Most Dangerous<br>
      </td>
    </tr>
    <tr ng-repeat="plan in plans">
      <td>{{plan}}</td>
      <td ng-repeat="column in cols">{{row[column]}}</td>
    </tr>
  </table>
</div>

Here is my JavaScript:

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

    function MyCtrl($scope) {
        $scope.rows = [
    {
        "Red COA 1": "arg", 
        "Red COA 2": $scope.minirows, 
        "Red COA 3": "", 
        "Red COA 4": ""
    }, 
    {
        "Red COA 1": "", 
        "Red COA 2": "", 
        "Red COA 3": "", 
        "Red COA 4": ""
    }, 
    {
        "Red COA 1": "", 
        "Red COA 2": "", 
        "Red COA 3": "", 
        "Red COA 4": ""
    }, 
    {
        "Red COA 1": "", 
        "Red COA 2": "", 
        "Red COA 3": "", 
        "Red COA 4": ""
    }, 
    {
        "Red COA 1": "", 
        "Red COA 2": "", 
        "Red COA 3": "", 
        "Red COA 4": ""
    }];
    $scope.plans = [{"plan": "Blue COA 1"},{"plan": "Blue COA 2"},{"plan": "Blue COA 3"},{"plan": "Blue COA 4"},{"plan": "Blue COA 5"}];
    $scope.cols = Object.keys($scope.rows[0]);
    $scope.minirows = [
    {
        "1": "Casualty",
        "2": "Ammo"
    },
    {
        "1": "Fuel",
        "2": "Equipment"
    }
  ];
  $scope.minicols = Object.keys($scope.rows[0]);
}

When I do this I get a number of issues. First, my rows are headed with {"plan":"Blue COA #"} rather than just Blue COA #. How do I fix this?

Second, I don't understand how to repeat a table in each cell with ng-repeat. Do I just put the new table inside the tag?

Third, I am not iterating over the rows, so how do I do that while also iterating through the plans? Should I move the information over to plans rather than rows?

Upvotes: 0

Views: 430

Answers (1)

Kalm004
Kalm004

Reputation: 21

I can only answer your first question:

When I do this I get a number of issues. First, my rows are headed with {"plan":"Blue COA #"} rather than just Blue COA #. How do I fix this?

You have declared your plans array as:

$scope.plans = [{"plan": "Blue COA 1"},{"plan": "Blue COA 2"},{"plan": "Blue COA 3"},{"plan": "Blue COA 4"},{"plan": "Blue COA 5"}];

But you are using it as:

 <tr ng-repeat="plan in plans">
   <td>{{plan}}</td>

Where plan is one of the elements inside the plans array, for example: {"plan": "Blue COA 1"}. If you want to one show "Blue COA 1" you need to use the plan property of the object:

<tr ng-repeat="plan in plans">
  <td>{{plan.plan}}</td>

In order to be able to respond to the other question it would be nice if you define what's the final result you are expecting, with your code it is not clear to me what data structure are you trying to represent.

Anyway I would recomend you organize your code in a better way, if you need help, this guide is really useful.

Upvotes: 2

Related Questions