ngRepeat über Paare zum Erstellen von Tabelle mit rowspan = "2"

Ich habe ein Array von Paaren, die ich in einer Tabelle anzeigen muss, wo die erste Spalte 2 Zeilen wie im Bild überspannt.ngRepeat über Paare zum Erstellen von Tabelle mit rowspan = "2"

Das Array wie folgt aussieht:

$scope.products = [{ 
    p0: {name: "n1", img: "a", brand: "apple", desc: "1"}, 
    p1: {name: "n2", img: "b", brand: "apple", desc: "2"} 
},{ 
    p0: {name: "n3", img: "c", brand: "apple", desc: "3"}, 
    p1: {name: "n4", img: "d", brand: "apple", desc: "4"} 
},{ 
    p0: {name: "n5", img: "e", brand: "apple", desc: "5"}, 
    p1: {name: "n6", img: "f", brand: "apple", desc: "6"} 
},{ 
    p0: {name: "n7", img: "g", brand: "apple", desc: "7"}, 
    p1: {name: "n8", img: "h", brand: "apple", desc: "8"} 
}];

Die "Hardcoded" Version dieses

wäre

<table class="table table-bordered"> 
    <tr> 
     <th></th> 
     <th>Brand</th> 
     <th>Product name</th> 
    </tr> 
    <tr> 
     <th rowspan="2">a b</th> 
     <td>apple</td> 
     <td>n1</td> 
    </tr> 
    <tr> 
     <td>apple</td> 
     <td>n2</td> 
    </tr> 
    <tr> 
     <th rowspan="2">c d</th> 
     <td>apple</td> 
     <td>n3</td> 
    </tr> 
    <tr> 
     <td>apple</td> 
     <td>n4</td> 
    </tr> 
</table>

Ich weiß nicht, wie ich das mit einer ng-repeat erreichen kann. Ich habe versucht, etwas albern wie der Code unten, aber offensichtlich hat es nicht funktioniert. Hilfe?

<div ng-repeat="pair in products"> 
    <tr> 
     <th rowspan="2">{{pair.p0.img}} {{pair.p1.img}}</th> 
     <td>{{pair.p0.brand}}</td> 
     <td>{{pair.p0.name}}</td> 
    </tr> 
    <tr> 
     <td>{{pair.p1.brand}}</td> 
     <td>{{pair.p1.name}}</td> 
    </tr> 
</div>

enter image description here

Quelle

2016-09-01 bvais

Mögen Sie verwenden, um eine cunstruction wie:

<tbody ng-repeat="..."> 
    <tr>...</tr> 
    ... 
</tbody>

in Ihrem Beispiel?

Quelle

2016-09-01 19:32:18

hinzugefügt haben, das war es, danke! – bvais

Sie möchten zwei tr Element in Tabelle für jeden Datensatz rechts einfügen?

können Sie verwenden Tag ng-repeat-start und ng-repeat-end wie folgt aus:

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script> 
     var app = angular.module('yourApp', []); 
     app.controller('MyCtrl', function($scope) { 
     $scope.products = [{ 
      p0: { name: "n1", img: "a", brand: "apple", desc: "1" }, 
      p1: { name: "n2", img: "b", brand: "apple", desc: "2" } 
     }, { 
      p0: { name: "n3", img: "c", brand: "apple", desc: "3" }, 
      p1: { name: "n4", img: "d", brand: "apple", desc: "4" } 
     }, { 
      p0: { name: "n5", img: "e", brand: "apple", desc: "5" }, 
      p1: { name: "n6", img: "f", brand: "apple", desc: "6" } 
     }, { 
      p0: { name: "n7", img: "g", brand: "apple", desc: "7" }, 
      p1: { name: "n8", img: "h", brand: "apple", desc: "8" } 
     }]; 
     }); 
    </script> 
    </head> 

    <body ng-app="yourApp"> 
    <div ng-controller="MyCtrl"> 
     <table class="table table-bordered"> 
     <tbody> 
      <tr> 
      <th></th> 
      <th>Brand</th> 
      <th>Product name</th> 
      </tr> 
      <tr> 
      <th rowspan="2">a b</th> 
      <td>apple</td> 
      <td>n1</td> 
      </tr> 
      <tr> 
      <td>apple</td> 
      <td>n2</td> 
      </tr> 
      <tr> 
      <th rowspan="2">c d</th> 
      <td>apple</td> 
      <td>n3</td> 
      </tr> 
      <tr> 
      <td>apple</td> 
      <td>n4</td> 
      </tr> 
     </tbody> 
     </table> 

     <table class="table table-bordered"> 
     <tbody> 
      <tr ng-repeat-start="pair in products"></tr> 
       <th rowspan="2">{{pair.p0.img}} {{pair.p1.img}}</th> 
       <td>{{pair.p0.brand}}</td> 
       <td>{{pair.p0.name}}</td> 
      </tr> 
      <tr> 
       <td>{{pair.p1.brand}}</td> 
       <td>{{pair.p1.name}}</td> 
      <tr ng-repeat-end></tr> 
     </tbody> 
     </table> 

    </div> 
    </body> 

</html>

ich plunker

Quelle

2016-09-01 19:53:22

ngRepeat über Paare zum Erstellen von Tabelle mit rowspan = "2"

Antwort

Verwandte Themen