Javascript 如何使用Angular.js通过ng repeat显示表内数据

我需要一个帮助，我需要使用Angular.js在表中显示数据。我在下面解释我的代码

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

我的html表格如下所示

<div class="table-responsive dashboard-demo-table">
    <table class="table table-bordered table-striped table-hover" id="dataTable" >
        <tbody>
            <tr>
                <td rowspan="2">Date</td>
                <td rowspan="2">Name</td>
                <td rowspan="2">Email</td>
                <td colspan="7">Order</td>
            </tr>
            <tr>
              <td>Order Id</td>
              <td>Order status</td>
            </tr>
            <tr>
              <td>date</td>
              <td>name</td>
              <td>email</td>
              <td>orderid</td>
              <td>orderstatus</td>
            </tr>
        </tbody>
   </table>
</div>

上表适用于序号1，同样适用于序号2，数据将相应显示。

---

这里我需要假设

$scope的第0个索引。listOfData

有两组数据一些字段值如

name，email

是相同的，因此这两个数据状态将合并并显示在表的第一个索引中。这里的日期列将包含从较低日期到较高日期的数据，如（

from date to todate

），名称和电子邮件字段将包含值1，但此处不同的是

order

列

order\u id和order\u status

对于

$scope.listOfData

中第0个索引的每一组数据都是不同的。因此这些数据将再次在另一个循环中移动。请帮助我。

以下内容可能会对您有所帮助

<div ng-repeat="data in listOfData">
  <!--<Do whatever you need here with data.name, data.date etc...>-->
  <!--You can keep your table here.-->
</div>

您不能像这样使用json格式，将其放在一个一级数组中，其中偶数索引包含“from”数据，奇数索引包含“to”数据，然后执行以下操作

    <tr ng-repeat="data in listOfData">
          <td ng-if="$index %2==0">{{data.date}}</td>
           <td ng-if="$index %2==1">To {{data.date}}</td>
           ...
  </tr>

为此：

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

因此，您的“from”行将具有偶数索引（0,2,4…），而您的“to”行将具有赔率索引（1,3,5…）

使用$index，您现在可以正确地构建行：$index由ng repeat给出。ng if是一个指令，如果条件不为true，它将不构建dom元素

那么这个

<td ng-if="$index %2==0">{{data.date}}</td>
<td ng-if="$index %2==1">To {{data.date}}</td>

{{data.date}
到{data.date}

---

将始终只生成一个

元素。

不，我认为它不是那么简单。请再次查看我的帖子。我无法理解。请您创建一个plunkr示例。首先，您确定json是这样的：“[{“日期”：…}而不是这样：[[{“日期”：…}，{…}]，{…}，{…}，{…}]，…]。我不知道如何才能正常工作。现在无法进行plunkr。我添加了另一个编辑，如果您不理解某些内容，请告诉我。为什么不使用这种方式？如果您完全想使用HTML，我看不到任何其他方式。现在，如果您可以使用表/网格（如引导网格）使用元素，它们是很多新的方法-1不好，这个问题很公平，它是关于在一个表中显示一对行，如果你不太习惯的话，这不是很容易做到的。

    <tr ng-repeat="data in listOfData">
          <td ng-if="$index %2==0">{{data.date}}</td>
           <td ng-if="$index %2==1">To {{data.date}}</td>
           ...
  </tr>

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

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

<td ng-if="$index %2==0">{{data.date}}</td>
<td ng-if="$index %2==1">To {{data.date}}</td>