如何使用Angular.js ng-repeat显示表内的数据数组答案

【问题标题】：How to display the array of data inside table Using Angular.js ng-repeat如何使用Angular.js ng-repeat显示表内的数据数组
【发布时间】：2016-02-06 17:14:15
【问题描述】：

我面临一个问题。我需要使用 Angular.js 在表格中显示一些数据数组。我在下面解释我的代码。

表：

<table class="table table-bordered table-striped table-hover" id="dataTable" >
        <tbody>
            <tr>
                <td rowspan="2">Date</td>
                <td rowspan="2">id</td>
                <td rowspan="2">email</td>
                <td colspan="7">Order</td>
            </tr>
            <tr>
              <td>Order Id</td>
              <td>Status</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
        </tbody>
   </table>

我在下面解释我的数据数组。

$scope.listOfData=
[
    {
        "date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
        "id": "36",
        "email": "raj@gmail.com",
        "order": [
            {
                "order_status": 1,
                "order_id": 1111
            },
            {
                "order_status": 0,
                "order_id": 2222
            },
            {
                "order_status": 1,
                "order_id": 5555
            }
        ]
    },
    {
        "date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
        "id": "37",
        "email": "rahul@gmail.com",
        "order": [
            {
                "order_status": 1,
                "order_id": 3333
            },
            {
                "order_status": 0,
                "order_id": 4444
            }
        ]
    }
]

我需要使用 Angular.js 将上述数据显示到表格中。请帮助我。

【问题讨论】：

标签： javascript arrays angularjs angularjs-ng-repeat

【解决方案1】：

运行此代码并检查输出。如果您需要不同的格式，请告诉我.. 干杯！！！

var app = angular.module("myApp",[]);
app.controller("AppController",['$scope',AppController]);

function AppController($scope) {
  
  
    $scope.listOfData=[
          {
              "date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
              "id": "36",
              "email": "raj@gmail.com",
              "order": [
                  {
                      "order_status": 1,
                      "order_id": 1111
                  },
                  {
                      "order_status": 0,
                      "order_id": 2222
                  },
                  {
                      "order_status": 1,
                      "order_id": 5555
                  }
              ]
          },
          {
              "date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
              "id": "37",
              "email": "rahul@gmail.com",
              "order": [
                  {
                      "order_status": 1,
                      "order_id": 3333
                  },
                  {
                      "order_status": 0,
                      "order_id": 4444
                  }
              ]
          }
      ];
      
      
    
  }

<!DOCTYPE html>

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script src="app.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="AppController">

  
  <table cellspacing="5px" style="border:1px solid black;">
  <tr >
        <th>Date</th>
        <th>id</th>
        <th>email</th>
        <th>Order</th>
    </tr>
    <tr ng-repeat="orderInfo in listOfData">
        <td>{{orderInfo.date}}</td>
        <td>{{orderInfo.id}}</td>
        <td>{{orderInfo.email}}</td>
        <td>
          <table>
            <tr>
              <th>Order stat</th>
              <th>Id<th>
            </tr>
            <tr ng-repeat="orderStat in orderInfo.order">
              <td>{{orderStat.order_status}}</td>
              <td>{{orderStat.order_id}}</td>
            </tr>
          </table>
        </td>
    </tr>   
    
  </table>
</div>

</body>
</html>
<!--
This is for table inside row.
<tr ng-repeat="orderInfo in listOfData">
        <td>{{orderInfo.date}}</td>
        <td>{{orderInfo.id}}</td>
        <td>{{orderInfo.email}}</td>
        <td>
          <table>
            <tr ng-repeat="orderStat in orderInfo.order">
              <td>{{orderStat.order_status}}</td>
              <td>{{orderStat.order_id}}</td>
            </tr>
          </table>
        </td>
        
    </tr>   -->

【讨论】：

那么您需要 id 和 order_status 的标头吗？
是的，我需要 order_status and order_id 的子标题。
您希望它在列内还是在订购位置？两者都可以不。你的选择。哪一个？
在order cilumn 下应该有两个子列，如orer id and order status，它们应该像你所做的那样保持多个值。
立即查看。这是否足够好或没有在每列中重复订单统计信息和 id 标题？

【解决方案2】：

试试这个

        <tr ng-repeat="(key,list) in listOfData">
          <td ng-repeat="(key, lists) in list.order "> {{lists.order_status}}</td>
          <td ng-repeat="(key, lists) in list.order "> {{lists.order_id}}</td>
        </tr>

【讨论】：

【解决方案3】：

让你的表头固定，把它放在你的循环之外。

把它放在循环之外，即 ng-repeat

           <tr>
                <td rowspan="2">Date</td>
                <td rowspan="2">id</td>
                <td rowspan="2">email</td>
                <td colspan="7">Order</td>
            </tr>

您不想为每个项目都创建它，因为它会被修复。

现在，如上所述，使用 ng-repeat 遍历您的 json 对象列表。

像这样..

<table class="table table-bordered table-striped table-hover" id="dataTable" >
   <div ng-repeat="list in listOfData">
    {{list.id}}
     <div ng-repeat="oderlist in list.order">
          {{orderlist.order_id}}
     </div>
</div>
</table>

您可以进行相应的修改。

【讨论】：

【解决方案4】：

这对你有帮助，

<tr ng-repeat="item in listOfData">
<td> 
   <ul>
      <li>
         {{item.order}} // or print your array element there
      </li>
   </ul>
</td>

【讨论】：