Question

我需要一个帮助，我需要使用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>

预期的输出结果。

date                name        email                     order
                                                    order_id     order_status

2016-01-25          raj          raj@gmail.com          1111        1
 to 2016-02-04                                           2222       0

上表针对sl no-2再次为序列号1，数据将相应显示。这里我需要假设$scope.listOfData的第0个索引有两组数据，一些字段值如name,email是相同的，所以这两个数据的状态将连接，它将显示在表的第一个索引中。这里是日期列将包含更低的日期更高的日期，如（from date to todate），名称和电子邮件归档将包含值1，但order列order_id and order_status的不同之处对于0的每组数据都不同来自$scope.listOfData的索引，所以这些将再次移动到另一个循环中。请帮助我。

Answer 1

以下内容可以帮助您

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

Answer 2

<tr ng-repeat="data in listOfData">
          <td>{{data.date}}</td><td>{{data.name}}</td>....
</tr>

PS for header你可以使用＆lt; thead＆gt;标签

编辑：

 {
     {'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}
  }

您可以使用这样的json格式，将其展平为一个级别的数组，其中偶数索引包含＆＃34;来自＆＃34;和奇数包含＆＃34;到＆＃34;数据然后执行以下操作

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

所以你的＆＃34;来自＆＃34;行将具有偶数索引（0,2,4 ...）和你的＆＃34;到＆＃34;线将有赔率（1,3,5，...）。

使用$ index你现在可以正确构建你的行：$ index由ng-repeat给出。如果条件不为真，则ng-if是一个不会构建dom元素的指令。

所以这个

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

始终只构建一个<td>元素。

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

2 个答案: