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

【问题标题】：Not able to display correct data in table -AngularJS无法在表中显示正确的数据-AngularJS
【发布时间】：2015-09-11 06:40:24
【问题描述】：

下面是我尝试在每个类别下显示数据的 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);
      }
    })
  })

Creating a table matrix

【问题讨论】：

给我们完整的信息，json响应示例，请求后端的代码等等。
plunker里面有JSON。表中数据的排列是需要的
ng-repeat 除了简单的循环之外什么都不做，所以如果你的item 有一个product，它只会渲染一个cell。所以你需要预处理你的数据，或者更改ng-repeat 的表达式:-)
抱歉，我不知道你希望你的桌子是什么样子？！
示例：rom 值 1 应低于 100-milk 即，(1*1).rom 值 12345 应低于 200-bread

标签： javascript arrays angularjs ng-repeat

【解决方案1】：

另一个变体，更改了ng-repeat 表达式。由于您在第一行重复 allProducts，因此您需要在其他行中重复它，并过滤所选值的数据。见下面的代码sn-p

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>

【讨论】：

Grundy，你能解释一下过滤器吗？过滤器：{consummable:item2})[0]
@forgottofly，当然：filter 是标准过滤器，我们将对象作为参数传递，这意味着找到consummable 属性与item2 相同的对象，因此过滤器返回数组过滤元素，我们简单的尝试获得第一
感谢 Grundy，解释得很好
我们如何支持列分组？我们是否需要在 json 数据中添加我们需要对列进行分组的列
@anmrk，你的意思是支持列分组？可能更好 ask new question 解释问题

【解决方案2】：

请检查结构：

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

只需将 item2 推入 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); // Here I have pushed item2 instead of item2.consummable
  }
})

})

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

【讨论】：

这里打印表格中的所有值。我只想打印每个标题下的特定值。示例：rom 值 1 应低于 100 牛奶，即（1*1）。 rom 值 12345 应该小于 200-bread

【解决方案3】：

您需要的解决方案如下：

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>

【讨论】：