テーブルに正しいデータを表示することはできません-AngularJS

Question

以下は私が各カテゴリの下にデータを表示しようとした私のプランカーです。しかし、データは想定通りに印刷されていません。 。

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

そして、ちょうどallProductsにITEM2を押す：

$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

さらに別の変形。最初の行でallProductsを繰り返すので、それを繰り返す必要があり、選択した値のデータをフィルタリングする必要があります。 ）

1のようallProducts世代を保つ：あなたが必要なもののためのソリューションは、以下の通りです

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

は、構造を確認してください：私は私のコードで間違ってやっているところ は私はわかりませんすぐれたフィールドの代わりに

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：変更ng-repeat発現とhttp://plnkr.co/edit/YWPL2EmKK6MIwIkevZ1W?p=preview

Answer 3

以下のコードを参照してください

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