AngularJS creating dummy directive
-
20-12-2019 - |
题
I want to create in AngularJS a "dummy" element to make nested ng-repeats.
So that following
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>
will expand into
<h3>1</h3>
<p>11</p>
<p>12</p>
<h3>2</h3>
<p>21</p>
<p>22</p>
Note that I don't want to be each group in div
or any other element.
I have tried following directive
app.directive('dummy', function () {
return {
restrict: 'E',
replace: true,
template: ''
};
});
However, it seems like it is preserving dummy
nodes.
Is this possible?
解决方案
The directives ng-repeat-start
and ng-repeat-end
can be used for this exact purpose.
<h3 ng-repeat-start="a in data.test">{{a.h}}</h3>
<p ng-repeat-end ng-repeat="b in a.d">{{b}}</p>
without need for a dummy element/directive, as can be seen in this Plunker.
其他提示
After searching Google, I found a blog post that answer this. It shows how to group with ng-repeat-start and ng-repeat-end. There's a running example with downloadable code. If you jump to the end, you can see the code that looks like this:
<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>
不隶属于 StackOverflow