I am currently working on creating a dynamic table that maps various enemy courses of action in the columns to friendly courses of action in the rows. Each cell in the table will contain a 2x2 matrix displaying the number of friendly casualties, ammo loss, fuel loss, and equipment loss. I plan to fill each cell with a 2x2 table that corresponds to each course of action.
Although I have a basic understanding of ng-repeat, I am facing challenges when attempting to manipulate the rows within the table. Every time I try something new, the layout breaks.
I apologize if my coding is messy as I am relatively new to javascript.
Here's the HTML code snippet:
<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>
Below is the JavaScript code:
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]);
}
Enemies are labeled as {"plan":"Blue COA #"} instead of just Blue COA #. How do I rectify this issue?
Furthermore, I am unsure how to repeat a table in each cell using ng-repeat. Should I simply embed the new table within the td tag?
Lastly, I am struggling with iterating over the rows while also cycling through the plans. Is it preferable to transfer the data to plans instead of rows?