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

I need one help i need to display data inside table using Angular.js.I am explaining my code below.

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

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

my html table is given below.

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

expected output result.

预期的产出结果。

date                name        email                     order
                                                    order_id     order_status

2016-01-25          raj          [e-mail]          1111        1
 to 2016-02-04                                           2222       0

The above table is for serial no-1 again for sl no-2 the data will display accordingly. Here i need suppose 0th index of $scope.listOfData has two set of data some field value like name,email are same so these two sate of data will join and it will display in 1st index of the table.Here date column will contain lower date to higher date like(from date to todate),name and email filed will contain the value one but here different is for order column order_id and order_status is different for each set of data of 0th index from $scope.listOfData so these will again move in a another loop.Please help me.

上表为sl no-2再次为序列号1,数据将相应显示。这里我需要假设$ scope.listOfData的第0个索引有两组数据,一些字段值如名称,电子邮件是相同的,所以这两个数据将加入,它将显示在表的第一个索引中。这里的日期列将包含更低的日期到更高的日期,如(从date到todate),名称和电子邮件归档将包含值1但这里不同的是订单列order_id和order_status对于$ scope.listOfData的第0个索引的每组数据是不同的所以这些将再次在另一个循环中移动。请帮助我。

2 个解决方案

#1

The following may help you

以下可能对您有所帮助

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

#2

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

PS for header you can use a <thead> tag

标头的PS你可以使用标签

Edit :

 {
     {'date':'2016-01-25 18:14:00','name':'raj','email':'[e-mail]','order_status':1,'order_id':1111},
     {'date':'2016-02-04 11:26:05','name':'raj','email':'[e-mail]','order_status':0,'order_id':2222}
  }

You can't with your json format like this, flatten it in a one level array with even index containing "from" and odd containing "to" datas then do the following

您不能使用这样的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>

EDIT : can't really make a plunker, here is what by flatten I mean transform this

编辑:不能真正做一个plunker,这是flatten我的意思是改变这个

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

Into this :

进入这个:

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

So your "from" lines will have even index (0,2,4...) and your "to" lines will have the odds ones (1,3,5,...).

因此,你的“from”行将具有偶数索引(0,2,4 ...),而你的“to”行将具有赔率(1,3,5,...)。

Using $index you can now built properly your lines : $index is given by ng-repeat. ng-if is a directive that won't build the dom element if the condition is not true.

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

So this

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

Will always build only one <td> element.

将始终只构建一个元素。