ng-repeat的AngularJS嵌套指令

我试图建立一个基于动态数据的表（列&行）。ng-repeat的AngularJS嵌套指令

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

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

注：关键是静态的名字，它应该在模板中进行设定，并没有这个问题的一部分。

输出应该是这样的：在结束

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

当然，它应该被解析（？）。

我发现，transcluding是不正确的方式去：根据这些意见，我开始了我自己的Plunker https://github.com/angular/angular.js/issues/7874#issuecomment-46410994 https://github.com/angular/angular.js/issues/7842#issuecomment-46416336

。我感觉到我正在那里（希望），但我似乎无法让它一起工作。

plunker

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

来源

2014-07-09 Roy Milder

这里有一个样本指令，将完成你想要什么：

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属性项=“<等等>”是你想组成你的桌子的对象数组。例如，我可以分配阵列

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>

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

这里是一个工作示例：https://docs.angularjs.org/guide/directive：http://plnkr.co/edit/Me1KtRErluEUV3T3r9iH?p=preview

为了更好地理解如何使用指令，我建议通过对指令的文档阅读。

希望这会有所帮助！

来源

2014-07-09 20:43:24 pje

嗨，谢谢你的答复。不过，我需要使用嵌套指令，其中第一个指令将引用范围数据对象。要使用的单元格将在模板中设置，并且需要在解析后插入父指令中。单元格指令将基于其他变量动态变化。 –

@RoyMilder在我可以进一步帮助你之前，你必须给我具体的行为，你想看看。给出一个例子，说明您希望在给定一组特定数据的情况下在屏幕上看到什么。谢谢！ – pje

嗨！谢谢！在我的问题结尾处，你看到了那个蹲下的人吗？我认为这应该给你一些见解 –

随着对AngularJS git的一些指导，我终于弄明白了。

目标

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

解决方案

所以我们可以说我有两组数据：

套装1：出席人名单。该列表由“名称”列，“年龄”列和“参加”列组成。名称是只读的，将可编辑的输入老化并参与需要成为一组单选按钮（是，否）。

第2组：成员列表。该列表包含“名称”，“受邀”。名称是只读的，“邀请”一组单选按钮。

在一个模板中，显示两个表。唯一需要做的事情是将数据对象添加到当前作用域，并在模板中以最小标记添加表。

数据组

$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库一起工作。

来源

2014-07-10 11:26:02

ng-repeat的AngularJS嵌套指令

回答

相关问题