Я пытаюсь создать динамическую таблицу, отображающую набор вражеских курсов действий в столбцах на дружественные курсы действий в строках. Каждая ячейка в таблице будет иметь матрицу 2x2, где каждая ячейка показывает количество потерь союзников, потери боеприпасов, потери топлива и потери оборудования. Все ячейки, пересекающие каждый курс действий, будут заполнены таблицей 2х2.
В основном я понимаю, как использовать ng-repeat, и я думаю, что мне придется создавать новый объект таблицы в HTML внутри каждой ячейки, однако всякий раз, когда я пытаюсь сделать что-нибудь смешное со строками, они ломаются.
Я извиняюсь, если мой код беспорядок, но я относительно новичок в javascript.
Вот мой 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>
Вот мой 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]);
}
Когда я это делаю, у меня возникает ряд проблем. Во-первых, мои строки озаглавлены {"plan":"Blue COA #"}, а не просто Blue COA #. Как это исправить?
Во-вторых, я не понимаю, как повторить таблицу в каждой ячейке с помощью ng-repeat. Мне просто поместить новую таблицу внутри тега?
В-третьих, я не перебираю строки, так как же мне это сделать, одновременно перебирая планы? Должен ли я перемещать информацию в планы, а не в строки?