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

How to display the array of data inside table Using Angular.js ng-repeat

本文关键字：数据 数组 显示 何使用 Angular js ng-repeat      更新时间：2023-09-26

我面临一个问题。我需要使用 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请帮助我。

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

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

试试这个

        <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>
让你的

标题固定在表格中，把它放在你的循环之外。

把它放在循环之外，即 ng 重复

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

您可以相应地修改它。

这将帮助你，

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