Question

我正在尝试使用具有列属性的angularjs生成表，但不会基于其标题显示数据。
这是我的代码。

    $scope.headers = [{
     "order": 1,
     "width": 0,
     "label": "ID",
     "data": "id",
     "type": "string",
     "visible": true
   },
   {
     "order": 2,
     "width": 120,
     "label": "Last Name",
     "data": "lastName",
     "type": "string",
     "visible": true
   },
   {
     "order": 3,
     "width": 129,
     "label": "First Name",
     "data": "firstName",
     "type": "string",
     "visible": false
   },
   {
     "order": 4,
     "width": 200,
     "label": "Email Address",
     "data": "email",
     "type": "string",
     "visible": false
   },
   {
     "order": 5,
     "width": 120,
     "label": "Phone Number",
     "data": "phoneNumber",
     "type": "string",
     "visible": true
   },
   {
     "order": 6,
     "width": 80,
     "label": "Username",
     "data": "username",
     "type": "string",
     "visible": true
   },
   {
     "order": 7,
     "width": 100,
     "label": "Last Login",
     "data": "lastLoginDate",
     "type": "date",
     "visible": true
   }
 ];

 $scope.users = [{
     "id": "1",
     "lastName": "Test1",
     "firstName": "Test",
     "email": "test1@example.com",
     "phoneNumber": "(555) 111-0001",
     "username": "ttest1",
     "lastLoginDate": "12/28/2012 3:51 PM"
   },
   {
     "id": "2",
     "lastName": "Test2",
     "firstName": "Test",
     "email": "test2@example.com",
     "phoneNumber": "(555) 222-0002",
     "username": "ttest2",
     "lastLoginDate": "12/28/2012 3:52 PM"
   },
   {
     "id": "3",
     "lastName": "Test3",
     "firstName": "Test",
     "email": "test3@example.com",
     "phoneNumber": "(555) 333-0003",
     "username": "ttest3",
     "lastLoginDate": "12/28/2012 3:53 PM"
   },
   {
     "id": "4",
     "lastName": "Test4",
     "firstName": "Test",
     "email": "test4@example.com",
     "phoneNumber": "(555) 444-0004",
     "username": "ttest4",
     "lastLoginDate": "12/28/2012 3:54 PM"
   },
   {
     "id": "5",
     "lastName": "Test5",
     "firstName": "Test",
     "email": "test5@example.com",
     "phoneNumber": "(555) 555-0005",
     "username": "ttest5",
     "lastLoginDate": "12/28/2012 3:55 PM"
   }

 ];

Answer 1

您需要在表行上触发第一个循环，并在表数据上触发第二个循环。表行循环用于用户数组，表数据循环用于标题数组。请检查stackblitz

上的示例

这是HTML代码：

<table>
  <thead>
    <th ng-repeat="header in headers">{{header.label}}</th>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td ng-repeat="header in headers">
        {{user[header.data]}}
    </td>
    </tr>
  </tbody>
</table>

Answer 2

您可以尝试

<table>
    <thead>
        <th ng-repeat="column in headers">{{column.label}}</th>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td ng-repeat="column in headers">
                {{user[column.data]}}
            </td>
        </tr>
    </tbody>
</table>

希望这会有所帮助。

AngularJS根据列属性动态生成表

2 个答案: