不能在表中显示正确的数据-AngularJS [英] Not able to display correct data in table -AngularJS

问题描述

下面是我plunker，我曾尝试在每个category.But数据不打印成应该。例来显示数据：-ROM值12345应直接受到面包。
我不知道在哪里，我在我的code做错了：

  $ scope.allProducts = [];
  angular.forEach（$ scope.data，功能（项指数）{
    angular.forEach（item.products，功能（项目2，指数）{
      如果（$ scope.allProducts.indexOf（item2.consummable）== -1）{
        $ scope.allProducts.push（item2.consummable）;
      }
    }）
  }）
 

创建一个表矩阵

解决方案

然而，随着改 NG-重复前pression另一个变体。既然你重复的 allProducts 的第一行，你需要重复和在其他国家，和过滤数据选择的值。见下面

code片段

\r

\r

VAR应用= angular.module（'plunker'，[]）;\r
\r
app.controller（'MainCtrl'，函数（$范围）{\r
  $ scope.name ='世界';\r
  $ scope.data = [\r
    {\r
        资源：100\r
        产品：\r
            {\r
                consummable：奶，\r
                 ROM：1\r
            }，\r
         \r
        ]\r
    }，\r
    {\r
        资源：200\r
        产品：\r
        \r
            {\r
                consummable：面包\r
                 ROM：12345\r
            }，\r
           \r
        ]\r
    }，\r
    {\r
        资源：300\r
        产品：\r
      \r
            {\r
                consummable：黄油，\r
                 ROM：123456789\r
            }\r
        ]\r
    }\r
];\r
\r
  $ scope.allProducts = [];\r
  angular.forEach（$ scope.data，功能（项指数）{\r
    angular.forEach（item.products，功能（项目2，指数）{\r
      如果（$ scope.allProducts.indexOf（item2.consummable）== -1）{\r
        $ scope.allProducts.push（item2.consummable）;\r
      }\r
    }）\r
  }）\r
\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.3.17/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=plunkerNG控制器=MainCtrl＆GT;\r
  ＆LT; P＆GT;您好{{名}}＆LT;！/ P＆GT;\r
\r
  ＆LT;表样式=边界：1px的红色实;＆GT;\r
    ＆所述; TR＆GT;\r
      ＆所述; TD＆GT;\r
      ＆LT; / TD＆GT;\r
      ＆LT; TD NG重复=itemProd在allProducts的风格=边界：1px的红色实;＆GT;\r
        {{itemProd}}\r
      ＆LT; / TD＆GT;\r
    ＆LT; / TR＆GT;\r
    ＆LT; TR NG重复= GT中的数据项＆;\r
      ＆所述; TD＆GT;\r
        {{item.resource}}\r
      ＆LT; / TD＆GT;\r
      ＆LT; TD NG重复=ITEM2在allProducts的风格=边界：1px的固体红色​​; NG-的init =产品=（item.products |过滤器：{consummable：ITEM2}）[0]＆GT;\r
        ＆所述a取代; {{product.rom}}＆下; / A＆GT;\r
      ＆LT; / TD＆GT;\r
    ＆LT; / TR＆GT;\r
  ＆LT; /表＆gt;\r
  {{allProducts}}\r
  {{数据}}\r
  \r
＆LT; / DIV＆GT;

\r

\r

\r

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