2017-01-31 5 views
0

Ich habe mehrere Sammlungen wie Ziele und Initiative etc ... Ich möchte eine Ausgabe wie diese mit WinkelMehrere Sammlung in derselben Tabelle mit

I want output like this

Meine Musterkollektion Daten:

$scope.objectives = [ 
    {id:1, name:"Objective 1"}, 
    {id:2, name:"Objective 2"}, 
    {id:3, name:"Objective 3"} 
] 

$scope.initiatives = [ 
    {id:1, name:"Initiative 1"}, 
    {id:2, name:"Initiative 2"}, 
    {id:3, name:"Initiative 3"} 
] 
+1

Willkommen bei StackOverflow. Bitte werfen Sie einen Blick auf einige hilfreiche Tipps zu [wie man eine gute Frage stellt] (http://stackoverflow.com/help/how-to-ask) - eine gute Frage zu stellen verbessert Ihre Chancen auf eine Antwort. Es ist aber genauso wichtig, dass Sie zuerst suchen und etwas recherchieren, bevor Sie Ihre Frage posten. Geben Sie auch an, was Sie versucht haben, und geben Sie an, welche Probleme aufgetreten sind. – ishmaelMakitla

Antwort

0

Soweit ich das verstanden habe, brauchen Sie so etwas wie

<div ng-controller="Main"> 
     <div class="column"> 
     <p>Objectives</p> 
     <ul> 
     <li ng-repeat="obj in objectives"> 
      {{obj.name}} 
     </li> 
     </ul> 
     </div> 
     <div class="column"> 
     <p>Initiatives</p> 
     <ul> 
     <li ng-repeat="ins in initiatives"> 
      {{ins.name}} 
     </li> 
     </ul> 
     </div> 
    </div> 

Hier ist Demo https://plnkr.co/edit/IhHnuWtFNnWsMkuYrVyD?p=preview

0

Bitte beachten Sie den Kommentar von ishmaelMakitla, da Ihre Frage nicht vollständig genug ist, um uns wirklich zu helfen, Ihr Problem zu verstehen.

Was ich hier lesen kann, ist die ngRepeat-Direktive. AngularJS API: ngRepeat, hier ist der Link.

Sie würden dann eine Struktur haben, die wie folgt aussehen könnte:

$scope.collection = [ 
    { 
    objective: "Some text" 
    measures: "Some useful data" 
    initiatives: "a list of things" 
    }, 
    { 
    objective: "Second item" 
    measures: "Second useful data" 
    initiatives: "another list of things" 
    } 
] 

Und in der HTML-Datei:

<ul> 
    <li ng-repeat="item in collection"> 
    <span class="column1>{{ item.objetive }}</span> 
    <span class="column2>{{ item.measures }}</span> 
    <span class="column3>{{ item.initiatives }}</span> 
    </li> 
</ul> 

Auf diese Weise können Sie eine Schleife durch Ihre Sammlung (ngRepeat) nach der Daten in Ihrem Controller ($ Scope) und die Vorlage in der HTML-Datei verwenden.

Wenn Sie 3 verschiedene Sammlungen haben, die nicht wie diese Datenstruktur zusammengeführt werden, sollten Sie überlegen, wie Sie Ihre Daten richtig strukturieren können. Da es sich jedoch höchstwahrscheinlich um eine Datenbank handelt, sollten Sie in der Lage sein, Ihre Daten auf diese Weise ohne größere Probleme zu strukturieren.

Verwandte Themen