Nested ng:repeat versus tree-tables.

[Paul Hammant]

The UI I want looks like this:

  some_key              a_column   another_column

  --------------------  --------   --------------

  Main Row              2          3

   . Child Row          2          3

   . Second Child Row   2          3

  Another Main Row      2          3

   . Child Row          2          3

I'd do some ng:show affordance on the top level row to expand collapse the child rows, in tree-table style.

With tables (ignoring css), this would look like:

<table>

  <tr> <td> Main Row </td> <td>2</td> <td>3</td> </tr> 

  <tr> <td> Child row </td> <td>2</td> <td>3</td> </tr> 

  <tr> <td> Second child row </td> <td>2</td> <td>3</td> </tr> 

  <tr> <td> Another Main Row </td> <td>2</td> <td>3</td> </tr> 

  <tr> <td> Child row </td> <td>2</td> <td>3</td> </tr> 

The Problem is my data, and how that would naturally work with Angular: 

    items = [{

                some_key:'Main Row',

                a_column:'2',

                another_column:'3',

                examples:[

                    {

                        some_key: "Child Row",

                        a_column: "2",

                        another_column: "3"

                    },

                    {

                        some_key: "Second child Row",

                        a_column: "2",

                        another_column: "3"

                    }

                ]

            }]

I can't do this in Angular :

<table>
  <div ng:repeat="item in items"> 
     <tr> <td> {{item.some_key}} </td> <td> {{item.a_column}} </td> <td> {{item.another_column}} </td> </tr>
     <tr ng:repeat="ex in item.examples"> <td> {{ex.some_key}} </td> <td> {{ex.a_column}} </td> <td> {{ex.another_column}} </td> </tr>
  </div> 
</table>

I can't do it, because the HTML isn't valid for interspersed DIV tags amongst table rows.  I could migrate to something table-less like http://chrismaxwell.com/tableless/example.html but I wonder if there is a contrived element that could exist in an Angular page for the same of XML completeness, but is removed from the consequential DOM mutations: 

<table>
  <remove_me ng:repeat="item in items"> 
     <tr> <td> {{item.some_key}} </td> <td> {{item.a_column}} </td> <td> {{item.another_column}} </td> </tr>
     <tr ng:repeat="ex in item.examples"> <td> {{ex.some_key}} </td> <td> {{ex.a_column}} </td> <td> {{ex.another_column}} </td> </tr>
  </remove_me> 
</table>

Thoughts?

- Paul 

[Vojta Jina]

This will be solved with new compiler.

In the meantime, I believe using tbody for that might work: http://jsfiddle.net/vojtajina/YdAsa/

V.

[Paul Hammant]

Of course, tbody, how silly of me!

Thanks Vojta.

There's something related in that the reference for part of the model can't be passed in to a controller function.  I'm not sure if this is by design, or not.  I added an "add" button to the row, to add a child row ( expanding the nascent tree table further ). Here's the code http://jsfiddle.net/phammant/4jhue/  Maybe the answer is to pass the key data, and to lookup the node afresh in the function, before issuing the 'push' on it.

- Paul

[Vojta Jina]

Try this: http://jsfiddle.net/vojtajina/YdAsa/2/

V.

[Paul Hammant]

Err, user error again - thanks.

On Tue, Jan 17, 2012 at 7:08 PM, Vojta Jina <vojta...@gmail.com> wrote:

Try this: http://jsfiddle.net/vojtajina/YdAsa/2/

V.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/SV00GjMjv9gJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Merve Temizer]

Hi,

I need also a openable/closable(collapsable) treetable.

Is it possible?

Thanks

18 Ocak 2012 Çarşamba 03:27:51 UTC+2 tarihinde Paul Hammant yazdı: