无法在表中显示正确的数据 -AngularJS [英] Not able to display correct data in table -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);}})})

创建表格矩阵

解决方案

又一个变体，改变了 ng-repeat 表达式.由于您在第一行重复 allProducts，您需要在其他行中重复它，并过滤所选值的数据.请参阅下面的代码片段

var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.name = '世界';$scope.data =[{"资源": "100",产品: [{"消费品": "牛奶",ROM":1},]},{"资源": "200",产品: [{"consumable": "面包",ROM":12345},]},{"资源": "300",产品: [{消费品":黄油"，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>你好{{name}}！</p><table style="border:1px 纯红色;"><tr><td></td><td ng-repeat="itemProd in allProducts" style="border:1px 纯红色;">{{itemProd}}</td></tr><tr ng-repeat="数据中的项目"><td>{{item.resource}}</td><td ng-repeat="item2 in allProducts" style="border:1px 纯红色;"ng-init="product=(item.products | filter: {consummable:item2})[0]"><a>{{product.rom}}</a></td></tr>{{所有产品}}{{数据}}

Below is my plunker where I have tried to display the data under each category.But the data are not printing as supposed to .Example:-rom value 12345 should come directly under bread. I'm not sure where I'm doing wrong in my code:

  $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

解决方案

Yet another variant with changed ng-repeat expression. Since you repeat allProducts in first line, you need repeat it and in others, and filter data for selected value. See code snippet below

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>

这篇关于无法在表中显示正确的数据 -AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！