javascript - 无法在表-AngularJS中显示正确的数据

下面是我尝试显示每个类别下的数据的插件，但是数据并未按预期方式打印。例如：-rom值12345应该直接放在面包下面。
我不确定我的代码在哪里做错了：

  $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

最佳答案

ng-repeat表达式已更改的另一个变体。由于您在第一行中重复了所有产品，因此需要在其他行中重复它，并为选定的值过滤数据。请参见下面的代码段

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>