Angular.js: ngRepeat with DL / DD / DT

second this. I've been having this issue for a while.

@IgorMinar did some work on a comment-based ng-repeat (https://github.com/angular/angular.js/pull/1646) but since comments don't play so well on all browsers it is not likely to be merged. Instead they are looking at an alternative solution, probably with either "start and end repeat tags" or "start-repeat and number of elements to repeat label"

How about allowing templates inside pairs like {{ }}

maybe:
{{! ng-repeat = "foo in l"

On a related note, i have a similar issue with Would there be large technical challenges to a second interpolation form
like {{{ }}} that did not escape html characters but also didn't create a
new span?

On Tue, Jan 29, 2013 at 12:38 PM, Pete Bacon Darwin <
[email protected]> wrote:

@IgorMinar https://github.com/IgorMinar did some work on a
comment-based ng-repeat (#1646https://github.com/angular/angular.js/issues/1646)
but since comments don't play so well on all browsers it is not likely to
be merged. Instead they are looking at an alternative solution, probably
with either "start and end repeat tags" or "start-repeat and number of
elements to repeat label"

—
Reply to this email directly or view it on GitHubhttps://github.com/angular/angular.js/issues/1891#issuecomment-12856484.

I just ran into this issue with a table that wants to generate two 'td' elements per object in an array.

+1 for adding this feature. Just ran into this same limitation.

:thumbsup:

Same problem here. I'd love to see something like "ng-repeat-children" repeating only the children but not the current element or a kind of "ng-omit-tag" (which removes the current tag but leaves children in place) to be used together with ng-repeat. This would avoid tons of invalid markup generated to workaround this problem.

Do not fully understand the limitation that is under discussion. Why putting the ng-repeat on the parent element does work? http://jsfiddle.net/JyWdT/13/
Can someone create a fiddle that explains the issue in more detail?

lgalfaso, Your fiddle creates multiple definition lists each with one definition. The desired output is one definition list with multiple definitions.

Or in my case, I need to create a pair of "td" elements for every item in an array.
Say I have an array,

[{name:dan, age:15}, {name:steve, age:21}]

and I need to output:

<tr><td>dan</td><td>15</td><td>steve</td><td>21</td></tr>

There is no way to accomplish that with angular at this time.

can't you do that by putting the ng-repeat on the tr element?

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE?p=preview

On Sun, Apr 21, 2013 at 2:24 PM, zilles [email protected] wrote:

lgalfaso, Your fiddle creates multiple definition lists each with one
definition. The desired output is one definition list with multiple
definitions.

Or in my case, I need to create a pair of "td" elements for every item in
an array.
Say I have an array,

[{name:dan, age:15}, {name:steve, age:21}]

and I need to output:

dan15steve21

There is no way to accomplish that with angular at this time.

—
Reply to this email directly or view it on GitHubhttps://github.com/angular/angular.js/issues/1891#issuecomment-16716788
.

Oh, I see, disregard my previous comment
On Apr 21, 2013 9:09 AM, "jason turim" jason.[email protected] wrote:

can't you do that by putting the ng-repeat on the tr element?

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE?p=preview

On Sun, Apr 21, 2013 at 2:24 PM, zilles [email protected] wrote:

lgalfaso, Your fiddle creates multiple definition lists each with one
definition. The desired output is one definition list with multiple
definitions.

Or in my case, I need to create a pair of "td" elements for every item in
an array.
Say I have an array,

[{name:dan, age:15}, {name:steve, age:21}]

and I need to output:

dan15steve21

There is no way to accomplish that with angular at this time.

—
Reply to this email directly or view it on GitHubhttps://github.com/angular/angular.js/issues/1891#issuecomment-16716788
.

As I just encounter the dl / dt + dd issue, I confirm that a new ng-repeat-children (or ng-repeat-inner) is a missing mandatory directive.

+1

Proposal for a new directive ng-repeat-inner. If this proposal is ok, then will modify all the guides

I think it would be better to use the same ng-repeat directive, but allow for that directive to be used on HTML comments, as the original post suggests.

Something like this should then work:

<dl>
  <!-- ng-repeat="(name, definition) in myList" -->
  <dt>{{name}}</dt>
  <dd>{{definition}}</dd>
  <!-- /ng-repeat -->
</dl>

Not sure exactly how the beginning and end of the block to be repeated would be achieved ( <!-- /ng-repeat --> was suggested by @ProLoser), but I think that using HTML comments would be an elegant solution.

Given that minifiers can kill comments and other issues with comments, I
don't think this is great. However, I like the idea of using ng-repeat.
would it be feasible to include an attribute ng-repeat-single-root or
something which when set to true will run the ng-repeat without the root
element? For example:

{i}

{i}

would become:

1

1

2

2

3

3

On Tue, Apr 23, 2013 at 3:54 PM, Mani Tadayon [email protected]:

I think it would be better to use the same ng-repeat directive, but allow
for that directive to be used on HTML comments, as the original post
suggests.

Something like this should then work:

{{name}}

{{definition}}

Not sure exactly how the beginning and end of the block to be repeated
would be achieved (I made up the in my example),
but I think that using HTML comments would be an elegant solution.

—
Reply to this email directly or view it on GitHubhttps://github.com/angular/angular.js/issues/1891#issuecomment-16891970
.

maxcan, I can see the advantages of "single-root", since you keep the source html valid, but that construct doesn't let you add anything else inside the "dl" tag... A fixed definition for example that you want to include before your loop of dynamic definitions. lgalfaso's solution would handle that.

@maxcan without a big rework or a performance hit, I do not think it is possible to add this property ng-repeat-single-root (well, add it and make it dynamic based on it). The rational is that there is a high chance that a change on this property would cause a recompilation [and nobody likes recompilations]

I like @bowsersenior's suggestion, but I'd prefer this as the closing comment: <!-- /ng-repeat -->

That's a shame on the performance hit. Anyway, I strongly endorse
@lgalfaso's solution, assuming you can put the directive in a div and not
just a comment..

On Wed, Apr 24, 2013 at 1:58 PM, Dean Sofer [email protected]:

I like @bowsersenior https://github.com/bowsersenior's suggestion, but
I'd prefer this as the closing comment:

—
Reply to this email directly or view it on GitHubhttps://github.com/angular/angular.js/issues/1891#issuecomment-16964155
.

I concur with @ProLoser that <!-- /ng-repeat --> is a better closing tag in the HTML comment approach. One note, angular allows directives to be defined in HTML comments, so I don't think HTML comments can be discarded as a potential solution for this problem. Keep in mind that the core angular developers indicated they planned to use HTML comments to address this issue in this stack overflow question (as pointed out by the original poster):

• http://stackoverflow.com/a/10458127/457819

I dont mind discarding them as long as there is a way to do this without
comments.

On Wed, Apr 24, 2013 at 2:41 PM, Mani Tadayon [email protected]:

I concur with @ProLoser https://github.com/ProLoser that is a better closing tag in the HTML comment approach. One
note, angular allows directives to be defined in HTML comments, so I don't
think HTML comments can be discarded as a potential solution for this
problem. Keep in mind that the core angular developers indicated they
planned to use HTML comments to address this issue in this stack overflow
question (as pointed out by the original poster):

• http://stackoverflow.com/a/10458127/457819

—
Reply to this email directly or view it on GitHubhttps://github.com/angular/angular.js/issues/1891#issuecomment-16969268
.

+1 to @lgalfaso's ng-repeat-inner. I'd finally like something that just gets this done.

Knockout does this with comments. I'm trying to port something I did with the dl tag in knockout and it seems like that is not possible until this issue is addressed.

This is my opinion, so without the input from @mhevery or @IgorMinar, take this with a grain of salt.
I do see that making ng-repeat work with comments is more flexible, anyhow It does not look natural without a change to $compiler so it can handle a directive of type "between comments". The reason being that it looks odd that a directive needs to take care about nesting and looking outside of the element that it is given to do what it is suppose to

If comments/no comments are the reason of an ongoing controversy, can't we just have them both? I find it difficult to understand that an issue as common as this hasn't been addressed for more than 3 months. If the reason behind this is mainly due to a controversy on implementation, it seems more preferable to have something actually implemented (and perhaps updated/added in the future) than wait around longer with nothing for something more "optimal".

In most cases though, it seems to me that if ng-repeat-inner refers to repeating a set of elements "within" a certain something, it implies that in most cases you've already created an exclusive outer container of some sort. Hence while a comment implementation might be more versatile (albeit perhaps an extra 1/2 lines of code that I'd like to avoid if at all possible), I feel that it may be less used (and perhaps should be less prioritised) than an in-element directive.

The issue of whether to use HTML comments does not have any relation to the fact that this issue has been outstanding for a few months. I think all that is needed is some attention from the angular maintainers to decide the issue and implement a solution.

In case you missed it, see here https://github.com/angular/angular.js/pull/1646 regarding problems with comment-based repeaters. @lgalfaso solution is much more promising at this point.

Thanks for pointing out #1646 . There is a comment in that discussion by @mhevery that proposes "a better way to do it" without showing any code (probably a formatting error):

I wish we knew what that "better way" was!

The consensus in the core team is that currently the best way to approach this problem is one of the following (we haven't settled on syntax but implementation is almost the same for all of these):

all these examples contain two td tags, I did this on purpose even though it's illegal because I wanted to show that the repeater should allow repeating over arbitrary number of elements - it would be better to convert this examples to use table and table rows, but I'm about to go offline now and don't have time to refactor them.

Syntax A:

<dl>
  <dt ng-repeat="(name, definition) in myList">{{name}}</dt>
  <dd ng-repeat-next>{{definition}}</dd>
  <dd ng-repeat-next>{{definition}}</dd>
</dl>

Syntax B:

<dl>
  <dt ng-repeat-start="(name, definition) in myList">{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

Syntax C:

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-start>{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

Syntax D:

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-group>{{name}}</dt>
  <dd ng-repeat-group>{{definition}}</dd>
  <dd ng-repeat-group>{{definition}}</dd>
</dl>

Long term, once we have better browser support, we'll start using the new <template> element which will allow us to do simply this:

Syntax X:

<template>
  <dl>
    <ng repeat="(name, definition) in myList">
      <dt>{{name}}</dt>
      <dd>{{definition}}</dd>
      <dd>{{definition}}</dd>
    </ng>
  </dl>
</template>

if anyone wants to craft a PR for this solution, it will get merged. Also if you have a preference for a particular syntax please speak out.

Thanks for the input. From my point of view, syntax A is not clear for nested loops like the following

<dl>
  <dt ng-repeat="...">loop 1</dt>
  <dt ng-repeat="..." ng-repeat-next>loop 2</dt>
  <dd ng-repeat-next>is this within loop 2 or only loop 1</dd>
</dl>

Syntax B and C are about the same, I like both alternatives (even when I think syntax B is somehow better)

Unless I am missing something, syntax D has the same nested loops issues as syntax A

I'd go for B if possible, purely due to having to write the least amount of letters. It also looks most symmetrical - I feel it would be easiest to manage due to the visual symmetry.

lgalfasos' comment points out an interesting dilemma. What if the nested loop in his example is on the first element instead of the second. Then all versions of the Syntax are now unclear, unless I'm missing something.

I don't quite understand the difference between @lgalfaso 's proposed ng-repeat-inner and the ng repeat in Syntax X, albeit the <template> wrapping. Could someone explain?

I'm not sure I understand it either, but I'm guessing the <ng> tag does not become part of the DOM, thus avoiding an illegal nesting structure under dl.

As for the proposed syntaxes, I'd vote for B.

I believe the syntax X case allows for a generic dummy wrapper element <ng> which is not part of the DOM and can host various directives. This is more generic than the ng-repeat-inner, which only applies to a specific use case for ng-repeat.

If syntax X, the long term aim, is just a more generic version of ng-repeat-inner, I feel that ng-repeat-inner should also be (*not solely) adopted along one of the proposed A,B,C,D for the following:

1. both syntax X and ng-repeat-inner have the same dom structure
   : if syntax X is the long term aim, it would be nice to have something now that aligns structure-wise to it similarly to prevent future refactoring.
2. in most cases ng-repeat-inner would suffice anyway
   : the intent is to create an outer container to repeat inner elements.

@daegon123 the difference between any of @IgorMinar's listed syntaxes (including X) and ng-repeat-inner is that the syntaxes let you arbitrarily repeat a set of elements without a distinct container. For example, repeat a set of <tr>s while there are other non-repeating <tr>s in the table or tbody. In that case, the elements to repeat don't have a distinct parent to bind ng-repeat-inner to.

<table>
    <thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

Or multiple definitions per object in a <dl>

<dl>
    <dt ng-repeat-start="...">{{item.term1}}</dt>
    <dd>{{item.def1}}</dd>
    <dt>{{item.term2}}</dt>
    <dd>{{item.def2}}</dd>
    <dt>{{item.term3}}</dt>
    <dd ng-repeat-end>{{item.def3}}</dd>
</dl>

@es128 Thanks for the comments and code. That's exactly the reason why I proposed that ng-repeat-inner be accepted 'along' one of the other listed syntaxes, but seeing actual code in your comments has started to make me wonder if ng-repeat-inner is even needed. I'll post another comment if I come across something - thanks again!

The problem with ng-repeat-inner is that it can't be used for in all the cases, for example:

<ul>
  <li>some static prefix item</li>
  <!-- repeat these nodes -->
    <li>{{ something }}</li>
    <li>{{ something else }}</li>
  <!-- repeat end -->
  <li>some static postfix item</li>
</ul>

because you can't put an artificial element (like div) into ul (per html spec), ng-repeat-inner can't be used here.

btw with template element, we will be able to put an artificial element in between ul and li.

Also don't get too attached to the syntax X, it was just a quick and dirty example of what we'll be eventually able to do the exact syntax is yet to be discussed, but while I'm at it, here is another one:

Syntax Y:

<ul>
  <li>some static prefix item</li>
  <template repeat="item in items">
    <li>{{ item.name }}</li>
    <li>{{ item.owner }}</li>
  </template>
  <li>some static postfix item</li>
</ul>

What about setting an id to the ng-repeat group ?
Then we could freely attach items to it from any level. Something like

<dl>
    <dt ng-repeat="item in items" ng-repeat-group="someId">{{item.term}}</dt>
    <dd ng-repeat-with="someId">{{item.definition}}</dd>
</dl>

could allow the flexibility we need.

Proposed implementation of syntax C, turns out that I think this is the syntax that would allow this same mechanism to be easy for other elements and directives

Nice work Lucas! I've spending the evening trying to implement syntax C. It works right, but nesting is not supported due to transclusion turning all ng-repeats into comments.

If I can not transverse the DOM looking for ng-repeat-start, I am not able to calculate the depth of ng-repeat-end attribute for matching. You're approach seems to be solve the issue...

Hmmm... something seems to be wrong. Docs are missing in your commit, so I may be I'm not using the right syntax.

Have a look into this:
http://plnkr.co/edit/sVilxKaNrhNM4JrkuQ5r?p=preview

I expected the output for the non-nested case to be:

Term: elastic
     Static term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
     This definition should be repeated for every term: 'par' term

And for the nested one:

Term: elastic
     Static term
Subterm: superelastic
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'elastic' term
Subterm: subelastic
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'elastic' term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
Subterm: superpar
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'par' term
Subterm: subpar
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'par' term
     This definition should be repeated for every term: 'par' term

I'm I missing something?

@lrlopez The example you put is not using the latest version of the code. Also, there is an extra </dl> at line 23

Thanks for the fast reply! You're right, there was an extra </dl> at line 23. I also updated the library. Nevertheless, I still can't get to work the nested example...

Ok, it looks like the is a real issue with multi-element directives that are at the same level at the DOM. Updated the PR with a fix for this issue

Fixes such as ng-repeat-inner or ng-repeat-next only solve one of countless situations where binding behaviors to actual DOM nodes will limit you.

Instead of patching every directive individually you can solve this for the entire framework by adding support for virtual nodes which don't render in the actual tree.

The idea of using comments is similar, but it results in unsightly, hard to read code and you still need a way to name that node and close it somehow. Instead of inventing a new comment node syntax, use existing HTML syntax.

Think about it as a concept similar to, say, SASS silent classes:

<div id="myComplexList">
    <ng-virtual ng-repeat="...">
        <a></a>
        <b></b>
        <c></c>
    </ng-virtual>
</div>

Result:

<div id="myComplexList">
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    ...
</div>

+1 to the general idea but I'd go for something like ng-repeat-group.

<ng-repeat-group="b in ches">
// group markup to be repeated here
</ng-repeat-group>

I like the idea of a virtual nodes, but I'm against it becoming a general solution for the problem here.

If at all possible, I'd like to limit the creation of any artificial containers. While the container may not show up on the html of the overall result, it would start cluttering up the html code that needs managing.

In many cases, we'll be needing some container to contain what we want to repeat. ex:

<tr>
  <td ng-repeat-start>1</td>
  <td ng-repeat-end>2</td>
</tr>

(the container here being the [tr]s)

using the virtual node solution proposed would turn this into:

<tr>
  <ng-virtual ng-repeat="...">
     <td>1</td>
     <td>2</td>
  </ng-virtual>
</tr>

making a redundant container: even this two line addition makes me feel uncomfortable thinking what it'd be like if the code got longer.

Another issue is that it'll start to make tedious trying to grasp what level of dom the code is currently in.
Here's a bit of code from @es128

<table>
<thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

using virtual nodes turns this into:

<table>
<thead>...</thead>
    <ng-virtual ng-repeat="...">
        <tr">...</tr>
        <tr>...</tr>
        <tr>...</tr>
    </ng-virtual>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

The repetition of the first 3 trs and the final tr are on the same level, but if I was just to take a quick skim through the code, there's a chance I'll mistake them as different levels, or I'll start finding myself tediously calculating (perhaps incorrectly) what level the code's working on, especially if these things start nesting.

Here is a particular version of syntax I like (of kind B):

<ul>
  <li>some static prefix item</li>
  <li ng-repeat-block="(name, definition) in myList">{{ something }}</li>
  <li>{{ something else }}</li>
  <li ng-repeat-block-close>{{ something else }}</li>
  <li>some static postfix item</li>
</ul>

@stanvass your proposal is a variation of what @IgorMinar posted as syntax X, the main issue is that browser support is just not there

I've just realised that having both a ng-repeat-start and a ng-repeat-end is redundant in the case that you only want to repeat one inner element.

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

It would be nice if we could also have a ng-repeat-single that would prevent this. ex.

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

@daegon123 if you want to repeat a single element, just do

<tr>
  <td ng-repeat="...">repeat this</td>
</tr>

No need for ng-repeat-start nor ng-repeat-end

@lgalfaso Thanks, it seems I've gotten caught up in the proposed syntax so much that I forgot what we already had. Hope we get the ng-repeat-start/end realized soon.

I think this issue is not about simply repeating one element. Its more about how to repeat a set of elements without repeating its parent. i.e. <dt>..<dd>... - but there were many other good examples in here.

Syntax X is the only one that is well defined once you start nesting repeats. How would you write the following in Syntax A-D:

<template>
  <dl>
    <ng repeat="book in myList">
      <dt ng-repeat="author in book.authors">{{author.name}}</dt>
      <dd>{{book.title}}</dd>
      <dd>{{book.description}}</dd>
    </ng>
  </dl>
</template>

It is better suggestion.
Sent from My Blackberry®

-----Original Message-----
From: daegon123 [email protected]
Date: Mon, 06 May 2013 22:57:16
To: angular/angular.jsangular.[email protected]
Reply-To: "angular/angular.js" [email protected]
Subject: Re: [angular.js] ngRepeat with DL / DD / DT (#1891)

I've just realised that having both a ng-repeat-start and a ng-repeat-end is redundant in the case that you only want to repeat one inner element.

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

It would be nice if we could also have a ng-repeat-single that would prevent this. ex.

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

Reply to this email directly or view it on GitHub:
https://github.com/angular/angular.js/issues/1891#issuecomment-17524685

+1, this is a big limitation.

:+1: look forward to seeing a solution for this! I'm going with using <li> for now, but would love to refactor that markup when angular comes out with a solution for this =)

Would #2783 resolve this?

Yes. We have a solution that just landed: e46100f7097d9a8f174bdb9e15d4c6098395c3f2

I'm closing this issue.

I got error: <TypeError: Object #<Text> has no method 'hasAttribute'> in this simple example:

<table>
        <tr ng-repeat-start="value in [1,2,3,4]">I get repeated</tr>
        <tr ng-repeat-end>I also get repeated</tr>
    </table>

Also getting the issue as gevgeny states.
has no method 'hasAttribute'>

<tr>
                <td data-ng-repeat-start="column in selectedItem.Beds" class="text-center">Avail. Beds</td>
                <td data-ng-repeat-end>Extra Bed Spaces</td>
</tr>

@kharnt0x see this puul request https://github.com/angular/angular.js/pull/2859

How would #2783 resolve this:

{[{h: "1",
   o: [{h: "1.1",
        o: [{h: "1.1.1"},
            {h: "1.1.2"},
            {h: "1.1.3"}]},
       {h: "1.2",
        o: [{h: "1.2.1"},
            {h: "1.2.2"},
            {h: "1.2.3"}]},

....

It need to output something like this:

<h1>1</h1>
<h2>1.1</h2>
<h3>1.1.1</h3>
<h3>1.1.2</h3>
<h3>1.1.3</h3>
<h2>1.2</h2>
<h3>1.2.1</h3>
<h3>1.2.2</h3>
<h3>1.2.3</h3> 

What would it be the syntax?

@ChrisCinelli Try use hgroup

<h1>1</h1>
<hgroup>
    <h2>1.1</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
    <h2>1.2</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
<hgroup>

So hgroup seems has been remove from HTML5 ( http://html5doctor.com/the-hgroup-element/ ), beside that, as I was saying the problem is more complex and the header tags were used just for example.
This is clearly a use case that should be allowed and does not break at all the declarative view philosophy of Angular...

For the specific output you're looking for, have you considered CSS
Counters?

See:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
http://css-tricks.com/almanac/properties/c/counter-increment/

On Tue, Jun 18, 2013 at 2:46 PM, Chris Cinelli [email protected]:

So hgroup seems has been remove from HTML5 (
http://html5doctor.com/the-hgroup-element/ ), beside that, as I was
saying the problem is more complex and the header tags were used just for
example.
This is clearly a use case that should be allowed and does not break at
all the declarative view philosophy of Angular...

—
Reply to this email directly or view it on GitHubhttps://github.com/angular/angular.js/issues/1891#issuecomment-19644594
.

I used the header as an example to make it clear... in reality I have a relatively complex <div> with different structure for each of the levels in the data structure.

The only solution that I found so far is to linearize the data structure in Javascript and use a ng-switch for different levels and it will require me an extra div level.
This solution has overhead (i.e. memory and CPU to linearize the data structure) and the HTML is going to look a lot less clearer than the underscore template that I can use instead...

Can you make directives for each level? I'm not sure what kind of
structure you're talking about here, so I'd just be grasping at straws.
But in my experience, ng-switch is hardly ever necessary when you have
access to directives and ng-include, and leads to spaghetti-code templates.

On Tue, Jun 18, 2013 at 4:27 PM, Chris Cinelli [email protected]:

I used the header as an example to make it clear... in reality I have
relatively complex div with different structure for each of the levels in
the data structure.

The only solution that I found so far would be linearize the tree in
Javascript and use a ng-switch for different levels.
This solution has overhead (i.e. memory and CPU to linearize the data
structure) and the HTML is going to look a lot less clearer than the
underscore template that I can be used instead...

—
Reply to this email directly or view it on GitHubhttps://github.com/angular/angular.js/issues/1891#issuecomment-19650391
.

This is how it looks like: http://d.pr/i/GSX4
Pretty much short labels (1.x.x x), descriptions, number of checkmarks etc, come from the db.
I am exploring the option to convert this part to Angular but so far no dices.

The current view is pretty logic-less and make it relatively clear what is going on.
If I understand well, you are pretty much suggesting to have to break every level in a piece of javascript.

This to me looks messier, less coesive and less readable. Given the data structure that has all the info to display this panel, why do I need to use code in a different file (the module/controller) when the logic is completely view related and very specific of this view? IMHO, the controller should be (and it is right now in the current implementation):

• get the data from the model
• pass the model to the view so the framework can render it

Sure I can add a few extra divs and change the CSS, but if this is necessary to make it work with Angular, it feels that Angular is in the way of how it is convenient and elegant to get the things done here.

I find the databinding in KnockoutJS, which allows both bindings to an html element <div data-bind="foreach: ..."> as well as "containerless control flow syntax", <!-- ko foreach: ... --><!-- /ko -->, to be extraordinarily useful, and think it would be great if Angular could support a similar set of syntax options, very much like the syntax @bowsersenior suggested.

For more details on Knockout's "containerless" option:
http://knockoutjs.com/documentation/foreach-binding.html

+1 for @mg1075 virtual syntax.
KnockoutJS makes it easier to deal with dd and nested collections.
e.g http://stackoverflow.com/questions/20062032/nested-table-using-ng-repeat