Mehrere ng-repeat in einer Tabellenzeile

Question

Ich möchte angleJS verwenden und eine ng-Wiederholung verwenden, um meine Daten anzuzeigen. Ich habe ein JSON, wo ich eine bestimmte Reihe von Elementen nach ID/Name gruppieren muss. Ich bin nicht sicher, wie man den bestimmten Ausgang erreicht. Ich habe ein Snipped mit dem Ausgang hinzugefügt, den ich benötige.

var obj = [{ 
 
    "id": 101, 
 
    "name": "Victor", 
 
    "address": "Mumbai" 
 
    "order": [{ 
 
     "itemName": "Bulb", 
 
     "quantity": 10 
 
     }, 
 
     { 
 
     "itemName": "Soap", 
 
     "quantity": 3 
 
     }, 
 
     { 
 
     "itemName": "Towel", 
 
     "quantity": 1 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "id": 102, 
 
    "name": "Francis", 
 
    "address": "Nagpur" 
 
    "order": [{ 
 
     "itemName": "Remote", 
 
     "quantity": 1 
 
     }, 
 
     { 
 
     "itemName": "Bread", 
 
     "quantity": 2 
 
     } 
 
    ] 
 
    } 
 
]

<table border="1" width="100%"> 
 
    <tr> 
 
    <th>Id</th> 
 
    <th>Name</th> 
 
    <th>Address</th> 
 
    <th>Item Name</th> 
 
    <th>Quantity</th> 
 
    </tr> 
 

 
    <!--- below is the output that i want -- uncomment and see the output --> 
 

 
    <tr> 
 
    <td>101</td><td>Victor</td><td>Mumbai</td><td>Bulb</td><td>10</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td><td></td><td></td><td>Soap</td><td>3</td>  
 
    </tr> 
 
    <tr> 
 
    <td></td><td></td><td></td><td>Towel</td><td>3</td>  
 
    </tr> 
 
    <tr> 
 
    <td>102</td><td>Francis</td><td>Nagpur</td><td>Remote</td><td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td><td></td><td></td><td>Bread</td><td>2</td>  
 
    </tr> 
 
    
 
</table>

Answer 1

Erläuterung:

Sie haben ng-repeat eine Schleife durch die Daten zu verwenden. Sie müssen aber auch ng-repeat-start und ng-repeat-end verwenden, da Ihre ersten 3 Spalten nicht in jeder Zeile wiederholt werden.

angular.module("tableApp", []).controller("tableController", ['$scope', function($scope) { 
 

 
    var temp = [{ 
 
     "id": 101, 
 
     "name": "Victor", 
 
     "address": "Mumbai", 
 
     "order": [{ 
 
      "itemName": "Bulb", 
 
      "quantity": 10 
 
     }, 
 
     { 
 
      "itemName": "Soap", 
 
      "quantity": 3 
 
     }, 
 
     { 
 
      "itemName": "Towel", 
 
      "quantity": 1 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     "id": 102, 
 
     "name": "Francis", 
 
     "address": "Nagpur", 
 
     "order": [{ 
 
      "itemName": "Remote", 
 
      "quantity": 1 
 
     }, 
 
     { 
 
      "itemName": "Bread", 
 
      "quantity": 2 
 
     } 
 
     ] 
 
    } 
 
    ] 
 
    /* 
 
    var arr = []; 
 
    for(var i=0;i<temp.length;i++){ 
 
    var obj = {} 
 

 
    obj.id = temp[i].id; 
 
    obj.address = temp[i].address; 
 
    obj.name = temp[i].name; 
 

 
    for(var j=0;j<temp[i].order.length;j++){ 
 
    obj.itemName = temp[i].order[j].itemName; 
 
    obj.quantity = temp[i].order[j].quantity; 
 
    } 
 
    arr.push(obj); 
 
    }*/ 
 

 
    $scope.arr = temp; 
 
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="tableApp"> 
 
    <table ng-controller="tableController" border="1" width="100%"> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
     <th>Address</th> 
 
     <th>Item Name</th> 
 
     <th>Quantity</th> 
 
    </tr> 
 

 
    <!--- below is the output that i want -- uncomment and see the output --> 
 

 
    <tr ng-if="0" ng-repeat-start="data in arr"> 
 
     <tr ng-repeat="a in data.order"> 
 
     <td ng-if="!$first"></td> 
 
     <td ng-if="$first">{{data.id}}</td> 
 
     <td ng-if="!$first"></td> 
 
     <td ng-if="$first">{{data.name}}</td> 
 
     <td ng-if="!$first"></td> 
 
     <td ng-if="$first">{{data.address}}</td> 
 
     <td>{{a.itemName}}</td> 
 
     <td>{{a.quantity}}</td> 
 
     </tr> 
 

 
     <tr ng-if="0" ng-repeat-end></tr> 
 
    </table> 
 
</div>

Answer 2

Bevor die Daten bevölkern, ziehe ich die Daten spalten nach Bedarf angezeigt, unterzogen werden, wenn Sie keine weiteren Operationen in sie eindringen werden.

Die unten js Geige gibt Ihnen die Ausgabe wie pro Ihre Anforderung. https://jsfiddle.net/waLvc49x/

<tbody ng-repeat="rows in values"> 
    <tr ng-repeat="row in rows.order"> 
     <td>{{!$index?rows.id:''}}</td> 
     <td>{{!$index?rows.name:''}}</td> 
     <td>{{!$index?rows.address:''}}</td> 
     <td>{{row.itemName}}</td> 
     <td>{{row.quantity}}</td> 
    </tr> 
    </tbody>