根据提取的数据在html表中显示数据

时间:2018-01-02 06:28:49

标签: angularjs json html5 twitter-bootstrap-3

我在hmtl5中创建了一个表,其中我使用js获取json数据并使用angular js循环遍历数据以下是html代码

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div class="container">
       <div  class="table-bordered table-responsive"  ng-repeat="x in ddata">  
  <table class="table">
    <thead>
      <tr>
        <th>Date</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>14</th>
        <th>15</th>
        <th>16</th>
        <th>17</th>
        <th>18</th>
        <th>19</th>
        <th>20</th>
        <th>21</th>
        <th>22</th>
        <th>23</th>
        <th>24</th>
        <th>25</th>
        <th>26</th>
        <th>27</th>
        <th>28</th>
        <th>29</th>
        <th>30</th>
        <th>31</th>
      </tr>
    </thead>
    <tbody>

      <tr ng-repeat="i in x"    ng-if='i.month=="Nov"'>
<!--
       <td>Nov</td>
        <td> {{i.day}}</td>
          <td> {{i.month}}</td>
-->

<td>Nov</td>

          <td ng-if='i.day="01"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="02"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="03"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="04"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="05"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="06"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="07"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="08"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="09"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="10"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="11"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="12"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="13"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="14"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="15"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="16"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="17"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="18"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="19"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="20"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="21"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="22"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="23"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="24"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="25"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="26"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="27"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="28"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="29"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="30"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>
          <td ng-if='i.day="31"'>{{(i.sgst/1000000)| currency:"&#8377;"}}</td>




        </tr>




    </tbody>
  </table>
</div>

</div>

</body>

现在我发布了一些我正在提取的json数据

{sgst: "5008688.00", month: "Jan", day: "01"}

:
{sgst: "0.00", month: "Aug", day: "01"}

:
{sgst: "5392323.00", month: "Sep", day: "01"}

:
{sgst: "630872.00", month: "Oct", day: "01"}


{sgst: "3258562.00", month: "Nov", day: "01"}


{sgst: "4985962.00", month: "Dec", day: "01"}

:
{sgst: "43685.00", month: "Aug", day: "02"}

:
{sgst: "1591974.00", month: "Sep", day: "02"}

:
{sgst: "3003474.00", month: "Oct", day: "02"}

:
{sgst: "2409776.00", month: "Nov", day: "02"}

:
{sgst: "3567207.00", month: "Dec", day: "02"}

:
{sgst: "31965.00", month: "Aug", day: "03"}

:
{sgst: "236068.00", month: "Sep", day: "03"}

:
{sgst: "6869161.00", month: "Oct", day: "03"}

:
{sgst: "5424188.00", month: "Nov", day: "03"}

:
{sgst: "113323.00", month: "Dec", day: "03"}

我希望第01天数据位于第1列,第2天数据位于第2列

之下

使用上面的代码会发生什么,例如,如果11月的第01天的数据是3258562.00。 显示所有31列

的3258562.00

第2天数据显示在整个第二行中。(所有列的数据相同) 等等

我希望数据在特定月份按日显示

nov day1data day2data day3data ........ dec day1data day2data dat3data ........

这个问题的任何解决方案?

1 个答案:

答案 0 :(得分:0)

<tr >

          <td id="monthname">Jan</td>


                          <td ng-repeat="n in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]"> <span ng-if='jd[n]=="0"'>0</span> <span ng-if='jd[n]!="0"'>{{(jd[n]/100000)| currency:"&#8377;"}}</span>  </td>





        </tr>

我没有写过ng-repeat,而是将其用于

对于1月份,ng-repeat将重复31次

同样地,我在剩下的11个月里又写了11个循环

<tr>
<td ng-repeat></td>
</tr>

此结构已在相应月份重复12次