用 json 类数据填充表

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>

现在我想要 tr 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数据的第一行设置标签值到我的表中。 我希望填充 json 的每个数据记录第一行的 tr 标签。

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>

等等..