Nicht in der Lage, korrekte Daten in der Tabelle anzuzeigen -AngularJS

Question

Unten ist mein Plunker, wo ich versucht habe, die Daten unter jeder Kategorie anzuzeigen.Aber die Daten werden nicht wie erwartet gedruckt .Beispiel: -von Wert 12345 sollte direkt unter Brot kommen . Ich bin nicht sicher, wo ich falsch in meinem Code tun:

$scope.allProducts = []; 
    angular.forEach($scope.data,function(item, index){ 
    angular.forEach(item.products, function(item2, index){ 
     if($scope.allProducts.indexOf(item2.consummable) == -1){ 
     $scope.allProducts.push(item2.consummable); 
     } 
    }) 
    }) 

Creating a table matrix

Answer 1

Noch eine andere Variante mit geändert ng-repeat Ausdruck. Da Sie alle Produkte in der ersten Zeile wiederholen, müssen Sie es wiederholen und in anderen, und filtern Sie Daten für ausgewählte Wert. Siehe Codeausschnitt unten

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
    $scope.data =[ 
 
    { 
 
     "resource": "100", 
 
     products: [ 
 
      { 
 
       "consummable": "milk", 
 
       "rom": 1 
 
      }, 
 
      
 
     ] 
 
    }, 
 
    { 
 
     "resource": "200", 
 
     products: [ 
 
     
 
      { 
 
       "consummable": "bread", 
 
       "rom": 12345 
 
      }, 
 
      
 
     ] 
 
    }, 
 
    { 
 
     "resource": "300", 
 
     products: [ 
 
     
 
      { 
 
       "consummable": "butter", 
 
       "rom": 123456789 
 
      } 
 
     ] 
 
    } 
 
]; 
 

 
    $scope.allProducts = []; 
 
    angular.forEach($scope.data,function(item, index){ 
 
    angular.forEach(item.products, function(item2, index){ 
 
     if($scope.allProducts.indexOf(item2.consummable) == -1){ 
 
     $scope.allProducts.push(item2.consummable); 
 
     } 
 
    }) 
 
    }) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js"></script> 
 
<div ng-app="plunker" ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 

 
    <table style="border:1px solid red;"> 
 
    <tr> 
 
     <td> 
 
     </td> 
 
     <td ng-repeat="itemProd in allProducts" style="border:1px solid red;"> 
 
     {{itemProd}} 
 
     </td> 
 
    </tr> 
 
    <tr ng-repeat="item in data"> 
 
     <td> 
 
     {{item.resource}} 
 
     </td> 
 
     <td ng-repeat="item2 in allProducts" style="border:1px solid red;" ng-init="product=(item.products | filter: {consummable:item2})[0]"> 
 
     <a>{{product.rom}}</a> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    {{allProducts}} 
 
    {{data}} 
 
    
 
</div>

Answer 2

Bitte überprüfen Sie die Struktur:

<table style="border : 1px solid"> 
<tr> 
    <td></td> 
    <td ng-repeat="product in allProducts"> 
    {{product.consummable}} 
    </td> 
</tr> 
<tr ng-repeat="test in data"> 

    <td>{{test.resource}}</td> 
    <td ng-repeat="pro in allProducts">{{pro.rom}}</td> 
</tr> 

und schieben item2 nur in allProducts anstatt nur für das verbrauchbare Feld:

angular.forEach($scope.data,function(item, index){ 
angular.forEach(item.products, function(item2, index){ 
    if($scope.allProducts.indexOf(item2.consummable) == -1){ 
    $scope.allProducts.push(item2); // Here I have pushed item2 instead of item2.consummable 
    } 
}) 

})

Plunker: http://plnkr.co/edit/YWPL2EmKK6MIwIkevZ1W?p=preview

Answer 3

Die Lösung für das, was Sie brauchen, ist die folgende:

1) halten die allProducts Generation wie folgt aus:

$scope.allProducts = []; 
    angular.forEach($scope.data,function(item, index){ 
    angular.forEach(item.products, function(item2, index){ 
     if($scope.allProducts.indexOf(item2.consummable) == -1){ 
     $scope.allProducts.push(item2.consummable); 
     } 
    }) 
    }) 

2) hinzufügen dies in Ihrem Controller:

$scope.getColumnValue = function(item,item2, index) { 
    var returnVal; 
    angular.forEach(item.products, function(val, index){ 
    if(item2 == val.consummable){ 
     returnVal = val.rom; 
    } 
    }) 
    return returnVal; 
} 

3) wird die Tabelle Generation sein:

<table style="border:1px solid red;"> 
    <tr> 
    <td> 
    </td> 
    <td ng-repeat="itemProd in allProducts" style="border:1px solid red;"> 
     {{itemProd}} 
    </td> 
    </tr> 
    <tr ng-repeat="item in data"> 
    <td> 
     {{item.resource}} 
    </td> 
    <td ng-repeat="item2 in allProducts" style="border:1px solid red;"> 
     <a>{{getColumnValue(item, item2)}}</a> 
     </td> 
    </tr> 
</table>