Nie można wyświetlić poprawnych danych w tabeli -AngularJS

Question

Poniżej znajduje się mój plunker, w którym próbowałem wyświetlić dane w każdej kategorii.Ale dane nie są drukowane zgodnie z założeniami. Przykład: -rom wartość 12345 powinna być bezpośrednio pod chlebem . nie jestem pewien, gdzie robię źle w moim kodu:

$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

Jeszcze inny wariant ze zmienionymi ng-repeat wypowiedzi. Ponieważ w pierwszym wierszu powtórzysz allProducts, musisz go powtórzyć, aw innych i przefiltrować dane dla wybranej wartości. Zobacz fragment kodu poniżej

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

Proszę sprawdzić 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> 

I Just Push ITEM2 w Allproducts zamiast tylko pola przeznaczonego do konsumpcji:

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

Rozwiązanie to, czego potrzebujesz to:

1) prowadzić generacji Allproducts tak:

$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) Dodaj to w kontrolerze:

$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) Tworzenie tabeli będą:

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