Wie platziert man eine Tabelle in eine andere Tabelle mit einer variablen Anzahl von Zeilen und Spalten in Angularjs?

Question

Ich versuche eine dynamische Tabelle zu erstellen, die eine Reihe feindlicher Handlungsabläufe in den Spalten auf freundliche Handlungsabläufe in den Zeilen abbildet. Jede Zelle in der Tabelle wird eine 2x2-Matrix haben, wobei jede Zelle die Anzahl der befreundeten Verluste, Munitionsverlust, Treibstoffverlust und Ausrüstungsverlust anzeigt. Alle Zellen, die jeden Handlungsverlauf kreuzen, werden mit einer 2x2-Tabelle gefüllt.

Ich verstehe im Grunde, wie man ng-repeat verwenden, und ich denke, dass ich ein neues Tabellenobjekt im HTML innerhalb jeder Zelle erstellen muss, aber wenn ich versuche, etwas lustiges mit den Zeilen zu tun, brechen sie.

Ich entschuldige mich, wenn mein Code ein Chaos ist, aber ich bin relativ neu in Javascript.

Hier ist mein 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> 

Hier ist mein 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]); 
} 

Wenn ich das tue ich eine Reihe von Fragen zu bekommen. Erstens sind meine Zeilen mit {"plan": "Blue COA #"} und nicht nur mit Blue COA # überschrieben. Wie behebe ich das?

Zweitens verstehe ich nicht, wie man eine Tabelle in jeder Zelle mit ng-wiederholen. Platziere ich die neue Tabelle einfach in das Tag?

Drittens, ich wiederhole nicht die Zeilen, also wie mache ich das, während ich auch die Pläne durchlaufe? Soll ich die Informationen in Pläne und nicht in Zeilen verschieben?

Answer 1

Ich kann nur Ihre erste Frage beantworten:

Als ich das bekomme ich eine Reihe von Fragen. Erstens sind meine Zeilen mit {"plan": "Blue COA #"} und nicht nur mit Blue COA # überschrieben. Wie behebe ich das?

Sie haben Ihre Pläne Array als deklariert:

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

Aber Sie verwenden es als:

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

Wo plan ist eines der Elemente innerhalb des plans Array, zum Beispiel: . Wenn Sie eine Show „Blue COA 1“ wollen, müssen Sie den Plan-Eigenschaft des Objekts verwenden:

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

Um auf die andere Frage beantworten zu können, wäre es schön, wenn Sie definieren, was das letzte ist Ergebnis, das Sie erwarten, mit Ihrem Code ist mir nicht klar, welche Datenstruktur Sie darstellen möchten.

Wie auch immer, ich würde empfehlen, dass Sie Ihren Code besser organisieren, wenn Sie Hilfe brauchen, this guide ist wirklich nützlich.