Question

我正在尝试根据动态数据（列和行）构建表格。

目标是拥有一个可重用的组件，该组件主要可以在模板html文件中设计。

<rows repeat = 'row in data'>
<cell key = '"key"' value = 'row.value'></cell>
<cell key = '"key2"' value = 'row.value2'></cell>
</rows>

注意：key是一个静态名称，它应该在模板中设置，而不是这个问题的一部分。

输出应该是这样的：

<tr ng-repeat = 'row in data'>
<td>{{row.value}}</td>
<td>{{row.value2}}</td>
</tr>

当然最后应该解析（？）。

我发现抄写不是正确的方法： https://github.com/angular/angular.js/issues/7874#issuecomment-46410994 https://github.com/angular/angular.js/issues/7842#issuecomment-46416336

根据这些评论，我开始使用自己的Plunker。我觉得我到了那里（希望如此），但我似乎无法让它一起工作。

plunker

有人能指出我正确的方向吗？

Answer 1

这是一个可以完成你想要的示例指令：

myApp.directive('myTable', function () {
  return {
    restrict: 'E',
    templateUrl: 'MyTable.html',
    scope: {
      items: '='
    },  
    link: function (scope) {
      scope.keys = [];
      for (var key in scope.items[0]) {
        scope.keys.push(key);
      }
    }
  };
});

您可以像这样使用此指令：

<my-table items="people"></my-table>

html属性items =“＆lt; blah＆gt;”是要组成表的对象数组。例如，我可以分配数组

people = [{name: 'John', occupation: 'Programmer'},
{name: 'Jill', occupation: 'Analyst'},
{name: 'Jeff', occupation: 'Sales'},
{name: 'Joan', occupation: 'Designer'}];

到items（就像我在上面的示例中所做的那样），它会创建一个包含该信息的表。

我们在指令中使用templateUrl，该模板的html如下所示：

<table>
  <tr>
    <td ng-repeat="key in keys">{{key}}</td>
  </tr>
  <tr ng-repeat="item in items">
    <td ng-repeat="value in item">{{value}}</td>
  </tr>
</table>

这将创建一个表，其第一行是列标题列表，对应于数组中对象的属性名称。然后，它为每个项创建一个新行，并为每个列迭代它们的值。

以下是一个工作示例：http://plnkr.co/edit/Me1KtRErluEUV3T3r9iH?p=preview

为了更好地理解如何使用指令，我建议您阅读指令文档：https://docs.angularjs.org/guide/directive。

希望这有帮助！

Answer 2

在对AngularJS git的一些指导下，我终于明白了。

<强>目标

创建可重用的组件，用于根据动态数据创建表。表格样式，单元格属性等需要在模板中完成。

<强>解决方案

所以，让我说我有两组数据：

第1组：参加人员名单。该列表包含一个＆＃34;名称＆＃34;专栏，＆＃34;年龄＆＃34;专栏和＆＃34;参加＆＃34;柱。名称是只读的，年龄可编辑的输入和参加需要是一组单选按钮（是，否）。

第2组：成员列表。该列表由＆＃34; name＆＃34;，＆＃34; welcome＆＃34;组成。姓名只读，＆＃34;邀请＆＃34;一组单选按钮。

在一个模板中，显示两个表。唯一需要做的是将数据对象添加到当前范围，并在模板中添加具有最小标记的表。

数据集

$scope.attending = [{name: "Roy", age: 30, attending: "Yes"}, {name: "Thomas", age: "29", attending: "No"}];
$scope.members = [{name: "Roy", invited: "Yes"}, {name: "Thomas", invited: "No"}, {name: "Mary", invited: "No"}, {name: "Hanna", invited: "Yes"}];

表1 /第1集：

<table class='table table-bordered table-striped'>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Attending</th>
  </tr>
  <tr row rows = 'attending'>
    <td cell type='readonly' key='name'></td>
    <td cell type='input' key='age'></td>
    <td cell type='radio' key='attending'></td>
  </tr>
</table>

表2 /第2集

<table class='table table-bordered table-striped'>
  <tr>
    <th>Name</th>
    <th>Gender</th>
  </tr>
  <tr row rows = 'members'>
    <td cell type='readonly' key='name'></td>
    <td cell type='radio' key='invited'></td>
  </tr>
</table>

整个组件可以在这里看到： plnkr

它尚未完全完成，但我已经到了那里。该组件也应该与ngTable库一起使用。

AngularJS使用ng-repeat嵌套指令

2 个答案: