在angularjs中使用ng-repeat的表内表

时间:2017-08-23 12:37:17

标签: javascript css angularjs html5

我是angularjsweb-development的新手。我正在使用ng-repeat来表示复杂表格中的数据,如下所示:

A     B   C     D
abc  pqr  xyz   std

所以,这是代码:

<div class="table-responsive">
          <table class="table table-striped table-bordered report-table table-fixed" contextmenu-container="meta.contextmenu" fixed-header>
            <thead class="text-center text-info">
              <th class="text-center">A</th>
              <th class="text-center">B</th>
              <th class="text-center">C</th>
              <th class="text-center">D</th>
            </thead>
            <tr ng-repeat="report in reports.data">
              <td class="text-center">{{ report.attributes.annotation }}</td>

              <td class="td-report-field" contenteditable="{{enableReportEditing}}" contextmenu-item="report" context-menu="menuOptions">{{ report.attributes.field }}</td>
              <td>
                <input type="checkbox" ng-if="report.attributes.message && showcheckbox" ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
                <span ng-if="report.attributes.message" contentEditable ng-model="report.attributes.message">
                      {{ report.attributes.message }}
                    </span>
                <span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
              </td>
              <td class="text-center">{{ report.attributes.score }}</td>
            </tr>
          </table>
        </div>

json就像:

{
        "type": "report",
        "id": 14,
        "attributes": {
            "annotation": "abc",
            "field": "pqr",
            "message": "xyz",
            "score": "7"
        },
        "innerAnnotations": {
            {
                "annotation": "jkl",
                "field": "pqr",
                "message": "xyz",
                "score": "6"
            },

            {
                "annotation": "Qualification",
                "field": "EFG",
                "message": "HIJ",
                "score": "5"
            }

        }
    },

现在表应该看起来像 - (abc将是父亲)

A              B   C     D
abc            pqr  xyz   7
 jkl           pqr  xyz   6
 Qualification EFg  Hij   5

所以,我尝试过一些东西,但没有运气。任何人都可以帮我解决这个问题吗?任何帮助都会很棒。

1 个答案:

答案 0 :(得分:0)

你在ng-repeat中提到了错误的数据

ng-repeat =“report.data中的报告”

替换为 ng-repeat =“report.innerAnnotations中的报告”。此外,您还需要更改内部html角度表达式。