Question

我想使用angular生成html表。我有一个json对象，我使用ng-repeat添加多行。但我的表结构不同。我想生成这样的表结构：

      <tr ng-repeat = "user in users">
         <td>{{user.id}}</td>
         <td>{{user.subject}}</td>
      </tr>

我的角度代码是：

WorkbookDesigner wd = new WorkbookDesigner();
wd.Workbook.Initialize();
Worksheet sht = wd.Workbook.Worksheets[0];
string value = "term";
value = string.Format("\"{0}\"", value);
sht.Cells[row + rowOffset, column].PutValue(value);
wd.Save(fileLoc, FileFormatType.CSV);

我想知道如何生成上面的表结构

Answer 1

您需要使用ng-repeat-start和ng-repeat-end。例如：

＆＃13;

var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {

    var users = [{
        id: 1,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 2,
            name: "phy"
        }]
    }, {
        id: 2,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 3,
            name: "math"
        }]
    }];

    $scope.users = users;
});

＆＃13;

table { border-collapse: collapse; }
td { border: 1px solid Black; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="MyApp" ng-controller="MyController">
    <thead>
        <tr>
            <td>ID</td>
            <td>Subjects</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start="user in users">
            <td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>                    
        </tr>
        <tr ng-repeat-end ng-repeat="subject in user.subjects">
            <td>S{{subject.id}}</td>
        </tr>
    </tbody>
</table>

＆＃13;

另外，在这里工作小提琴：http://jsfiddle.net/donal/r51d5fw5/17/

Answer 2

与对象的嵌套结构类似，您可以像这样嵌套ng-repeats ......

<tr ng-repeat = "user in users">
    <td>{{user.id}}</td>
    <td ng-repeat="subject in user.subjects">{{subject.name}}</td>
</tr>

Answer 3

我拆分你的JSON并将它推入两个$scope变量，如下所示：

angular.forEach($scope.user, function(user) {
    $scope.userDetails.push({
      userId: user.id,
    });

    angular.forEach(user.subjects, function(subject) {
      $scope.subjectDetails.push({
        userId: user.id,
        subjectName: subject.name
      });
    });
});

在HTML中，我使用filter按用户ID进行过滤。

<table>
  <thead>
    <tr>
      <th style="width: 50px">ID</th>
      <th style="width: 75px">Subjects</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in userDetails">
      <td><span ng-bind="user.userId"></span>
      </td>
      <td>
        <table>
          <tr ng-repeat="sub in subjectDetails | filter: {userId: user.userId}">
            <td>
              <div ng-bind="sub.subjectName"></div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

这也是实现这一目标的方法之一。

示例Plunker

Answer 4

在$ scope中添加用户对象。

$scope.users=[
    {id:1 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:2 , name:"phy"}
      ]
     },
    { id:2 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:3 , name:"math"}
     ]
    }
   ]

这是html。

 <table border="1">
  <tr>
    <th> ID   </th>
    <th>  subjects </th>
  </tr>
<tr ng-repeat="user in users">
     <td>{{user.id}}</td>
     <td><table>
       <tr ng-repeat="subject in user.subjects">
         <td>{{subject.name}}</td>
       </tr>
     </table></td>
  </tr>
  </table>

以下是plunker

Answer 5

在这里，我假设您希望用户（在您的JSON对象中）中的每个用户都在一个表中，因此您可以执行以下操作：

<table ng-repeat="user in users">
    <tr>
        <td>{{user.id}}</td>
        <td>Subjects</td>
    </tr>
    <tr ng-repeat="subject in user.subjects">
        <td>{{subject.id}}</td>
        <td>{{subject.name}}</td>
    </tr>
</table>

根据您的需要相应地调整html，但这是基本的想法:)

希望这有帮助！

使用angular生成html表

5 个答案: