Question

我想知道如何通过读取本地json来显示数据。在具有4列的行中，2列来自1个阵列，2列来自不同的阵列。

HTML：

<table class="table table-striped table-bordered">
<thead>
  <tr>
    <th></th>
    <th>IT</th>
    <th>IT User</th>
    <th>CT</th>
    <th>CT User</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="currency">Type A</td>
    <td class="currency"></td>
    <td class="currency"></td>
    <td class="currency"></td>
    <td class="currency"></td>
  </tr>
  <tr>

    <td class="currency">Type B</td>
    <td class="currency"></td>
    <td class="currency"></td>
    <td class="currency"></td>
    <td class="currency"></td>
  </tr>
</tbody>

JSON：

    {  
   "intr_liab":[  
      {  
     "ty":"typeA",
     "it":"100",
     "ct":"200"
  },
  {  
     "ty":"typeAITUser",
      "it":"300",
      "ct":"400"
  },
  {  
     "ty":"typeB",
      "it":"500",
      "ct":"600"
  },
  {  
     "ty":"typeBITUser",
     "it":"700",
     "ct":"800"
   }
 ]
}

因此表格中的数据应为：

<body ng-controller="MainCtrl">
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th></th>
        <th>IT</th>
        <th>IT User</th>
        <th>CT</th>
        <th>CT User</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="currency">Type A</td>
        <td class="currency">100</td>
        <td class="currency">300</td>
        <td class="currency">200</td>
        <td class="currency">400</td>
      </tr>
      <tr>
        
        <td class="currency">Type B</td>
        <td class="currency">500</td>
        <td class="currency">700</td>
        <td class="currency">600</td>
        <td class="currency">800</td>
      </tr>
    </tbody>
  </table>
</body>

请参阅此Plunker以获得更清晰： https://plnkr.co/edit/USt7nXmwCTRcCfOx8sma

Answer 1

请用以下内容替换HTML代码。我希望它会对你有所帮助。

<body ng-controller="MainCtrl">
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th></th>
        <th>IT</th>
        <th>IT User</th>
        <th>CT</th>
        <th>CT User</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in intLiab">
        <td class="currency">{{item.ty}}</td>
        <td class="currency">{{item.it}}</td>
        <td class="currency"></td>
        <td class="currency">{{item.ct}}</td>
        <td class="currency"></td>
      </tr>
    </tbody>
  </table>
</body>

如果您需要更具体的答案，请发表评论。

根据AngularJS中的条件显示本地JSON中的数据

1 个答案: