How to do table formatting in angularjs?

Question

I generated table data and table columns dynamically in angularjs. My table is

Name    Hobby
XXXX    Music
XXXX    Cricket
XXXX    Books
YYYY    Tennis
YYYY    Books
YYYY    Drawing

But I want my table to be displayed like this :

Name    Hobby

XXXX
        Music
        Cricket
        Books
YYYY
        Tennis
        Books
        Drawing

I used the following code to generate table :

        <tr>
            <th ng-repeat="th in keys">{{th}}</th>
        </tr>
        <tr ng-repeat="x in data ">
            <td ng-repeat="th in keys">
                {{ x[th]}}
            </td>
         </tr>

My json looks like this

[{"Name:"XXXX", "Hobby":"Music"},
{"Name:"XXXX", "Hobby":"Cricket"},
{"Name:"XXXX", "Hobby":"Books"},
{"Name:"YYYY", "Hobby":"Tennis"},
{"Name:"YYYY", "Hobby":"Books"},
{"Name:"YYYY", "Hobby":"Drawing"}]

I can't use similar to this

<ng-repeat="(key, value) in players | groupBy: 'team'">

because my table headers are created dynamically

How I can do this in angularjs?

Possible duplicate of stackoverflow.com/questions/23493063/… — com2ghz
– com2ghz, Commented May 28, 2015 at 12:09

freethinker · Accepted Answer · 2015-05-28 12:30:09Z

3

here is simple javascript solution:

var array = [{"Name":"XXXX", "Hobby":"Music"},
{"Name":"XXXX", "Hobby":"Cricket"},
{"Name":"XXXX", "Hobby":"Books"},
{"Name":"YYYY", "Hobby":"Tennis"},
{"Name":"YYYY", "Hobby":"Books"},
{"Name":"YYYY", "Hobby":"Drawing"}];

 var distinctNames = []

 for (i = 0; i < array.length; i++) { 
   if(distinctNames.indexOf(array[i].Name) === -1){
      distinctNames.push(array[i].Name);
   }
   else{
       array[i].Name = "";
   }
 }

DEMO

After this filter you can render array in your table

answered May 28, 2015 at 12:30

freethinker

2,4454 gold badges28 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Parkar · Accepted Answer · 2015-05-28 17:54:32Z

1

You could do this thing on markup itself, no need of sorting or filtering an array.

Markup

  <table>
    <thead>
      <tr>
        <th ng-repeat="th in keys">{{th}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="x in data">
        <td ng-repeat="th in keys">
          <span ng-show="th != 'Name' || (th == 'Name' && data[$parent.$index - 1]['Name'] != x['Name'])">
          {{ x[th]}}
          </span>
        </td>
      </tr>
    </tbody>
  </table>

Demo

edited May 28, 2015 at 17:54

answered May 28, 2015 at 14:16

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

Pankaj Parkar · Accepted Answer · 2015-05-28 17:53:35Z

0

I would use ng-table You will be able to easily sort, filter and group your table.

edited May 28, 2015 at 17:53

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered May 28, 2015 at 12:09

Martin Choraine

498 bronze badges

Collectives™ on Stack Overflow

How to do table formatting in angularjs?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related