davidjnelson/angular-table

Add Jade Template Support

johntom opened this issue · 8 comments

johntom commented

Hi,
I'm trying to use angular-table in a nodejs/jade enviornment followed the documentation and using both css files provided in the demo. The following displays the data but only display a table height of 32.
TIA
John

Jade file
p
#inside
#header
input.search-query(style='width:100px', type='text', ng-model='filterText', placeholder='Filter')

#main-content



    .span8.body-content




        angular-table(model='types',filter-query-model='filterText', default-sort-column='id',class="demoTable", style="padding-bottom: 1px;")
          header-row

            header-column(sortable='true', sort-field-name='id', class="demoHeaderColumn")
                    div(style='display: inline-block;') Id
                    sort-arrow-ascending
                    sort-arrow-descending
            header-column(sortable='true', sort-field-name='name', class="demoHeaderColumn")
                    | Name

            row(on-selected='handleRowSelection(row)', selected-color='#87cefa', even-color='#ffffff', odd-color='#eeeeee')
                    column {{ row.id }}
                    column {{ row.name }}

Html
Html

1GLBI
10ALBI & ALPD
11Appraisal
12Subro
13Subro property
14Surveillance
15Theft
16Collision
17Other
2GLPD
3ALBI
4ALPD
5PIP/NO-FAULT
6WC
7PROP
8GLBI & GLPD
Id
Name
davidjnelson commented

Thanks for submitting the issue John. I haven't used Jade templates before so I'm not exactly sure what the issue might be at the moment. I put this as a potential-feature-discussion.

I'm curious though, since angular already is a templating engine, why do you need jade? What's the use case for using two templating systems together?

johntom commented

Jade is the view engine of choice served from node.js, once you get used to it, it's hard to go back. At any rate not sure why jade is the culprit as node converts to html. That's why I sent the html, it just shows as 1 row in runtime. I will test some more tomorrow but it seems to pick up the header height and if I change from 32 to 320 all the row display but header is covered.
HTH

davidjnelson commented

oh that makes sense, so jade is the node templating engine, so there is still just one templating engine in the browser, being angular. Gotcha. Can you put the html in with the markdown syntax so I can see the code? The three backticks to start and end?

johntom commented

I will try again and change the html so it's not rendered.

johntom commented

I got it to work! Must fiddle with tab settings for each row.
p
#inside
#header
input.search-query(style='width:100px', type='text', ng-model='filterText', placeholder='Filter')
#main-content

       .span11.body-content
              angular-table(model='types',filter-query-model='filterText', default-sort-column='id',class="demoTable", style="height:600px;padding-bottom: 1px;")

          header-row

           header-column(sortable='true', sort-field-name='id', class="demoHeaderColumn")
                    div(style='display: inline-block;') Id
                    sort-arrow-ascending
                    sort-arrow-descending
           header-column(sortable='true', sort-field-name='name', class="demoHeaderColumn")
                    | Name

          row(on-selected='handleRowSelection(row)', selected-color='#87cefa', even-color='#ffffff', odd-color='#eeeeee')
                    column {{ row.id }}
                    column {{ row.name }}

Thanks

davidjnelson commented

Nice!! This is awesome John.

davidjnelson commented

added to documentation.

airtonix commented

i wish it was possible to view the source of peoples comments...

Saying tabs are important and then presenting a code snippet that fails to represent those important tabs is slightly frustrating.