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

下面是我的plunker，我尝试在其中显示每个类别下的数据。但数据没有按预期打印。示例：-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);
      }
    })
  })

---

请检查结构：

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

})

---

Plunker:

另一种变体，其表达方式发生了变化。由于您在第一行中重复所有产品，所以需要在其他行中重复它，并为所选值过滤数据。请参阅下面的代码片段

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.name='World'；
$scope.data=[
{
“资源”：“100”，
产品：[
{
“可消费”：“牛奶”，
“rom”：1
},
]
},
{
“资源”：“200”，
产品：[
{
“可消费”：“面包”，
“rom”：12345
},
]
},
{
“资源”：“300”，
产品：[
{
“可消费”：“黄油”，
“rom”：123456789
}
]
}
];
$scope.allProducts=[]；
angular.forEach（$scope.data，function）（项，索引）{
angular.forEach（项.产品，功能）（项2，索引）{
if（$scope.allProducts.indexOf（item2.consummable）=-1）{
$scope.allProducts.push（item2.consummable）；
}
})
})
});

你好{{name}}

{{itemProd}}
{{item.resource}}
{{product.rom}}
{{allProducts}}
{{data}}
您需要的解决方案如下：

1） 保持allProducts的生成方式如下：

  $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） 将此添加到控制器中：

$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） 表格生成将是：

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


{{itemProd}}
{{item.resource}}
{{getColumnValue（项，项2）}
提供完整信息、json响应示例、后端请求代码等。json在plunker中。表中的数据安排是所需的
ng repeat
除了简单循环之外，不要做任何事情，因此如果您的
项
有一个产品，它只渲染一个单元格。所以您需要预处理数据，或者更改
ng repeat
：-）的表达式抱歉，但我无法确定您希望您的表是什么样子的？！示例：rom值1应小于100 milk，即（1*1）。rom值12345应小于200 breadRundy，然后打印表中的所有值。我只想打印每个标题下的特定值。示例：rom值1应小于100 milk，即（1*1）。rom值12345应小于200 breadRundy，请解释一下过滤器？过滤器：{code>item2}）[0]@忘了，当然：这是标准过滤器，我们将对象作为参数传递，这意味着查找
consummable
属性与
item2
相同的对象，所以过滤器返回数组过滤元素，我们只需尝试获取FirstThank Grundy，很好地解释了我们如何支持列分组？我们是否需要在json数据中添加列，从中我们需要对数据进行分组columns@anmrk，什么是支持列分组？也许最好解释一下这个问题
<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>