Non è possibile visualizzare i dati corretti nella tabella -AngularJS

Question

Di seguito è riportato il mio plunker in cui ho cercato di visualizzare i dati in ogni categoria.Ma i dati non vengono stampati come previsto. Esempio: -dal valore 12345 dovrebbe venire direttamente sotto il pane . non sono sicuro dove sto facendo di sbagliato nel mio codice:

$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

Ancora un'altra variante con cambiato ng-repeat espressione. Poiché si ripete allProducts nella prima riga, è necessario ripeterlo e in altri e filtrare i dati per il valore selezionato. Vedere frammento di codice di seguito

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

Si prega di controllare la struttura:

<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> 

E proprio spingere item2 in allproducts invece del solo campo consumabile:

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

La soluzione per ciò che è necessario è il seguente:

1) mantenere la generazione allproducts in questo modo:

$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) Aggiungere questo nel 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) La generazione tavolo sarà:

<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>