AngularJS创建虚拟指令
AngularJS creating dummy directive
我想在AngularJS中创建一个"dummy"元素来嵌套ng-repeat。
所以后面的
data.test = [{h:1, d:[11,12]}, {h:2, d:[21,22]}];
----------------------
<dummy ng-repeat="a in data.test">
<h3>{{a.h}}</h3>
<p ng-repeat="b in a.d">{{b}}</p>
</dummy>
将扩展成
<h3>1</h3>
<p>11</p>
<p>12</p>
<h3>2</h3>
<p>21</p>
<p>22</p>
请注意,我不想在div
或任何其他元素中的每个组。
我已经尝试遵循指令
app.directive('dummy', function () {
return {
restrict: 'E',
replace: true,
template: ''
};
});
然而,它似乎保留了dummy
节点。
这可能吗?
指令ng-repeat-start
和ng-repeat-end
可用于此确切目的。
<h3 ng-repeat-start="a in data.test">{{a.h}}</h3>
<p ng-repeat-end ng-repeat="b in a.d">{{b}}</p>
,而不需要一个虚拟元素/指令,可以在这个Plunker中看到。
在Google上搜索后,我找到了一篇回答这个问题的博客文章。它展示了如何使用ng-repeat-start和ng-repeat-end进行分组。这里有一个运行的示例,其中包含可下载的代码。如果跳到最后,可以看到如下代码:
<body ng-controller="TeamListCtrl">
<div ng-repeat-start="team in teams" class="header">{{team.name}}</div>
<div ng-repeat="player in team.players" class="item">{{player.firstName}} {{player.lastName}}</div>
<div ng-repeat-end><br /></div>
</body>
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 参数变量出现ngTable指令问题
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 使用每次都不同的transclude重复指令
- 打开一个模态并将其链接到AngularJS中的指令
- 从html创建一个指令,该指令按类名应用函数
- 将JSON对象传递给angular指令
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- JavaScript指令不能像我想象的那样工作
- AngularJs指令,该指令创建内部有数据对象的新指令
- AngularJS指令只识别双向绑定类型
- 从控制器继承了隔离的作用域以生成可重用的指令
- AngularJS指令出错-无法读取属性'编译'的未定义
- Angular指令在alertify setContent内容中不起作用
- 对父作用域的指令更新延迟了一步
- 指令的模板必须只有一个根元素:With restrict E&替换true
- AngularJS指令单元测试中未定义的函数
- 指令加载真的很长,检查加载时间的方法
- AngularJS指令,在元素后插入HTML
- AngularJS创建虚拟指令