AngularJS - Building a dynamic table based on a json

Question

Given a json like this         name    john      colours      id   1   name    green     id   2   name    blue        and two regular html inputs    lt input type  text  name  name    gt   lt input type  text  name  color    gt   lt input type  submit  value  submit    gt    I need to build a table with all the possible variations  ex   John green John blue   That means that if a user continues adding values through the inputs new rows will appear building the new variations  for instance    I also need to have available the id to handle it  and I need that when I add new values using the inputs for instance   Peter   Black   I need to autofill the id  colour id  dynamically like an auto increment in mysql  resulting in something like this        colours            id   3   name    black        Is that possible  Which options do I have for doing that with angular  I m still thinking in the jQuery way and I would like to do it in the angular way   I took a look to hg-repeat  and used it  but I m not figuring out how to deliver the expected result  the only thing that come to my mind was to use nested ng-repeats  but it didm  t work   Thanks so much in advance   Guillermo

User · Answer

lt table class  table table-striped table-condensed table-hover  gt       lt thead gt       lt tr gt           lt th ng-repeat  header in headers   filter headerFilter   orderBy headerOrder  width    header width    gt   header label   lt  th gt       lt  tr gt       lt  thead gt       lt tbody gt       lt tr ng-repeat  user in users  ng-class-odd   trOdd   ng-class-even   trEven   ng-dblclick  rowDoubleClicked user   gt           lt td ng-repeat   key val  in user   orderBy userOrder key   gt   val   lt  td gt       lt  tr gt       lt  tbody gt       lt tfoot gt        lt  tfoot gt   lt  table gt    refer this https   gist github com ebellinger 4399082

User · Answer

First off all I would like to thanks  MaximShoustin   Thanks of you I have really nice table   I provide some small modification in  scope range and  scope setPage   In this way I have now possibility to go to the last page or come back to the first page  Also when I m going to next or prev page the navigation is changing when  scope gap is crossing  And the current page is not always on first position  For me it s looking more nicer   Here is the new fiddle example  http   jsfiddle net qLBRZ 3

User · Answer

Just want to share with what I used so far to save your time    Here are examples of hard-coded headers and dynamic headers  in case if don t care about data structure   In both cases I wrote some simple directive  customSort  customSort   directive  customSort   function         return           restrict   A           transclude  true              scope              order                 sort                         template                 lt a ng-click  sort by order   style  color   555555   gt                    lt span ng-transclude gt  lt  span gt                    lt i ng-class  selectedCls order   gt  lt  i gt                lt  a gt            link  function scope                change sorting order         scope sort by   function newSortingOrder                       var sort   scope sort               if  sort sortingOrder    newSortingOrder                   sort reverse    sort reverse                                                 sort sortingOrder   newSortingOrder                               scope selectedCls   function column                if column    scope sort sortingOrder                   return   icon-chevron-      scope sort reverse     down     up                               else                              return icon-sort                                             end link                  1st option with static headers   I used single ng-repeat  This is a good example in Fiddle   Notice  there is no jQuery library                  lt tbody gt                   lt tr ng-repeat  item in pagedItems currentPage    orderBy sortingOrder reverse  gt                       lt td gt   item id   lt  td gt                       lt td gt   item name   lt  td gt                       lt td gt   item description   lt  td gt                       lt td gt   item field3   lt  td gt                       lt td gt   item field4   lt  td gt                       lt td gt   item field5   lt  td gt                   lt  tr gt               lt  tbody gt     2nd option with dynamic headers   Demo 2  Fiddle    HTML   lt table class  table table-striped table-condensed table-hover  gt               lt thead gt                   lt tr gt                      lt th ng-repeat  header in table headers                         class    header name    custom-sort order  header name  sort  sort                       gt    header name                              lt  th gt                      lt  tr gt               lt  thead gt               lt tfoot gt                   lt td colspan  6  gt                       lt div class  pagination pull-right  gt                           lt ul gt                               lt li ng-class   disabled  currentPage    0   gt                                   lt a href ng-click  prevPage    gt    Prev lt  a gt                               lt  li gt                                lt li ng-repeat  n in range pagedItems length  currentPage  currentPage   gap                                    ng-class   active  n    currentPage                               ng-click  setPage    gt                                   lt a href ng-bind  n   1  gt 1 lt  a gt                               lt  li gt                                lt li ng-class   disabled   currentPage     pagedItems length - 1   gt                                   lt a href ng-click  nextPage    gt Next    lt  a gt                               lt  li gt                           lt  ul gt                       lt  div gt                   lt  td gt               lt  tfoot gt               lt pre gt pagedItems length    pagedItems length json   lt  pre gt               lt pre gt currentPage    currentPage json   lt  pre gt               lt pre gt currentPage    sort json   lt  pre gt               lt tbody gt                    lt tr ng-repeat  item in pagedItems currentPage    orderBy sort sortingOrder sort reverse  gt                        lt td ng-repeat  val in item  ng-bind-html-unsafe  item table headers  index  name   gt  lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt      As a side note   The ng-bind-html-unsafe is deprecated  so I used it only for Demo  2nd example   You welcome to edit

User · Answer

Check out this angular-table directive

User · Answer

Here s an example of one with dynamic columns and rows with angularJS  http   plnkr co edit 0fsRUp p preview

User · Answer

TGrid is another option that people don t usually find in a google search  If the other grids you find don t suit your needs  you can give it a try  its free

[javascript] AngularJS - Building a dynamic table based on a json

Examples related to javascript

Examples related to angularjs