Question

根据以下内容我有一张表：

  <div class="row">
    <div class="row">
      <table class="table table-bordered table-striped tree-grid">
        <thead class="text-primary">
          <tr>
            <th></th>
            <th>level1
            </th>
            <th></th>
            <th>level2</th>
          </tr>
        </thead>
        <tbody>
          <tr id="x" class="tree-grid-row">
            <td style="width:85px" class="text-primary"></td>
            <td style="width:50px">
              <label>self</label>
              <br />
              <label>employee</label>
              <br />
              <label>chef</label>
            </td>
            <td style="width:30px">
              <label type="text">1</label>
              <br />
              <label type="text">2</label>
              <br />
              <label type="text">3</label>
            </td>
            <td style="width:30px">
              <label type="text">4</label>
              <br />
              <label type="text">5</label>
              <br />
              <label type="text">6</label>
            </td>
            <td style="width:30px">
              <label type="text">7</label>
              <br />
              <label type="text">8</label>
              <br />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

现在我希望在id="x"中使用ng-repeat and {{}}的json数据集进行绑定，以便html td标记中的每个标签值都设置第一个字段数据json。样本：

[
  {
    "Weight": 25,
    "Goal": 26,

    "Name": "Jack  ",
    "Description": "2.5",
    "Area": "52%",
    "Population": "-",
  "DemographicId": 1,  
          "ParentId": null
  },
  {
    "Weight": 55,
    "Goal": 26,

    "Name": "Mojtaba  ",
    "Description": "2.5",
    "Area": "52%",
    "Population": "-",
  "DemographicId": 2,  
          "ParentId": 1
  },...]

假设我有1000个记录数据json。我希望ng-repeat和{{}}将每个字段json数据的第一行设置标签值放入我的表中。我的第一行的每个数据记录的tr标签我希望json被填充。

Answer 1

您需要在代码中添加ng-repeat，类似于以下代码：

<tr id="x" class="tree-grid-row" ng-repeat="data in myJsonData">
    <td>
        <label>{{data.Name}}</label>
        <br />
        <label>{{data.Description}}</label>
        <br />
        <label>{{data.Weight}}</label>
    </td>
    <td>
        <label>{{data.Goal}}</label>
    </td>
    .
    .
    .
</tr>

依旧......

使用json类数据填充表

1 个答案: