Question

我想要生成看起来像https://output.jsbin.com/nowacafacu

的表格

<div class="table-row" ng-repeat="student in students">
    <div><i>{{student.name}}</i></div>
    <div>Grade:</div>
    <div>Mark:</div>
    <br>
    <div ng-repeat="data in student.data">

    </div>
  </div>

尝试了几个小时，需要一个善于angularjs的人的帮助

Answer 1

试试这个Nately

http://jsfiddle.net/sharmi1308/ez2e12e4/2/

                <div ng-controller="MyCtrl">
              <div id="header-row">
                <div class="date-header" ng-repeat="date in dates">
                  {{date}}
                </div>
              </div>
              <div class="table-row" ng-repeat="student in students">
                <div><i>{{student.name}}</i></div>
                <div class="gradewrap">
                  <div class="gradedetails">
                    <div>Grade:</div>
                    <div>Mark:</div>
                  </div>
                  <div class="gradevalueswrap">
                    <div class="gradevalues" ng-repeat="data in student.data">
                      <div>
                        {{data.grade}}
                      </div>
                      <div>
                        {{data.mark}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

Answer 2

你可以这样做：

<div class="table-row" ng-repeat="student in students">
    <div><i>{{student.name}}</i></div>
    <span>
    Grade:
    </span>
    <span ng-repeat="data in student.data">
      {{data.grade}}
    </span>
    <br>
    <span>
    Marks:
    </span>
    <span ng-repeat="data in student.data">
      {{data.mark}}
    </span>
    <br>
  </div>

一切顺利。

Answer 3

尝试关注HTML文章，

  <div class="table-row" ng-repeat="student in students">

    <div><i>{{student.name}}</i></div>

    <div>Grade:
      <div style="display:inline-block;padding: 10px;" ng-repeat="aGrade in student.data">
      {{aGrade.grade}}
      </div>
    </div>

    <div >Mark:
       <div style="display:inline-block;padding: 10px;" ng-repeat="aGrade in student.data">
       {{aGrade.mark}}
       </div>
    </div>

  </div>

Answer 4

您可以在html

中尝试以下操作

<div ng-controller="MyCtrl">
  <div id="header-row">
    <div class="date-header" ng-repeat="date in dates">
      {{date}}
    </div>
  </div>

  <br>

  <div class="table-row" ng-repeat="student in students">
    <div><i>{{student.name}}</i></div>
    <span>Grade:</span> 
    <span ng-repeat="x in student.data">
         {{x.grade}}
    </span>
    <br/>
    <span>Mark:</span> 
    <span ng-repeat="x in student.data">
         {{x.mark}}
    </span>
    </div>
  </div>
</div>

如果要将其格式化为正确的表格

<div ng-controller="MyCtrl">
  <div id="header-row">
    <div class="date-header" ng-repeat="date in dates">
      {{date}}
    </div>
  </div>

  <br>

  <table class="table-row" ng-repeat="student in students">
  <tr><td><i>{{student.name}}</i></td></tr>
    <tr>
    <td>Grade:</td> 
    <td ng-repeat="x in student.data">
         {{x.grade}}
    </td>
    <tr>
    <td>Mark:</td> 
    <td ng-repeat="x in student.data">
         {{x.mark}}
    </td>
    </tr>
  </table>
</div>

用angularjs ng-repeat构建2路表

4 个答案: