में सही डेटा प्रदर्शित करने में सक्षम नहीं तालिका -AngularJS

Question

नीचे मेरी plunker मैं कहाँ के तहत प्रत्येक category.But रूप .example करने वाला डेटा मुद्रण नहीं कर रहे हैं डेटा को प्रदर्शित करने की कोशिश की है है: -ROM मान 12345 सीधे रोटी के तहत आना चाहिए ।

<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

फिर भी बदल ng-repeat अभिव्यक्ति के साथ एक और संस्करण। चूंकि आप पहली पंक्ति में सभी उत्पाद दोहराते हैं, इसलिए आपको इसे दोबारा और अन्य में दोहराने की आवश्यकता है, और चयनित मान के लिए डेटा फ़िल्टर करें।

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

संरचना की जांच करें: मुझे यकीन है कि जहां मैं अपने कोड में गलत कर रहा हूँ नहीं कर रहा हूँ बजाय केवल consummable क्षेत्र की:

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

समाधान कोड स्निपेट देखें

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