Question

我正在尝试使用angularjs生成一个表。代码如下

代码：

 <table>
     <thead>
         <tr>
             <th>Column Name1</th>
             <th>Column Name2</th>
         </tr>
     </thead>

     <tbody>
         <tr ng-repeat="item in Items">
             <th>{{Items[$index].Age}}</th>
             <th>{{Items[$index].School}}</th>
         </tr>
     </tbody>
 </table>

我想要做的是，当在表格中生成年龄和学校数据时，它们应该在一个人的名字下，并且该名称应该出现在列中。我怎么能这样做？

如果我有一个$ scope数组，如下所示;

$scope.Items = [{Name:Jhon,Age:23, School: 'some school'}....];

我希望colum名称为Jhon和Below，我希望其他2个数据

Answer 1

您正在重复项目数组，其中每个对象（在您的案例中为'item'）具有Age和School属性，例如：

var Items = [{Age:23, School: 'some school'}....];

这部分是错误的：

<tbody>
   <tr ng-repeat="item in Items">
      <th>
         {{Items[$index].Age}}
      </th>
      <th>
         {{Items[$index].School}}
      </th>
</tbody>

它应该是：

<tbody>
   <tr ng-repeat="item in Items">
      <th>
         {{item.Age}}
      </th>
      <th>
         {{item.School}}
      </th>
</tbody>

Answer 2

查看下面的代码段，它说明了如何在名称下实现年龄和学校：

<tr ng-repeat="item in Items">
        <td>
          <table>
            <thead>
              <tr>
                <th colspan="2">{{item.Name}}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td align="center"><i>Age:</i> {{item.Age}}</td>
                <td align="center"><i>School:</i> {{item.School}}</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>

观看演示here。

使用ng-repeat获取表的列名

2 个答案: