Как поместить таблицу в другую таблицу с переменным количеством строк и столбцов в Angularjs?

Я пытаюсь создать динамическую таблицу, отображающую набор вражеских курсов действий в столбцах на дружественные курсы действий в строках. Каждая ячейка в таблице будет иметь матрицу 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. Мне просто поместить новую таблицу внутри тега?

В-третьих, я не перебираю строки, так как же мне это сделать, одновременно перебирая планы? Должен ли я перемещать информацию в планы, а не в строки?


person Chthonic One    schedule 20.11.2017    source источник


Ответы (1)


Я могу ответить только на ваш первый вопрос:

Когда я это делаю, у меня возникает ряд проблем. Во-первых, мои строки озаглавлены {"plan":"Blue COA #"}, а не просто Blue COA #. Как это исправить?

Вы объявили свой массив планов как:

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

Но вы используете его как:

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

Где plan — один из элементов внутри массива plans, например: {"plan": "Blue COA 1"}. Если вы хотите показать «Синий сертификат подлинности 1», вам нужно использовать свойство плана объекта:

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

Чтобы иметь возможность ответить на другой вопрос, было бы неплохо, если бы вы определили, какой конечный результат вы ожидаете, с вашим кодом мне не ясно, какую структуру данных вы пытаетесь представить.

В любом случае, я бы рекомендовал вам организовать свой код лучше, если вам нужна помощь, это руководство действительно полезно.

person Kalm004    schedule 20.11.2017