Angularjs ng-repeat object - duplicate values

Question

I have an object with a data structure as below,

data = {};

data[user1] = {
 name:  "apple",
 Company: "001"
};
data[user2] = {
 name:  "apple",
 Company: "002"
};
data[user3] = {
 name:  "orange",
 Company: "003"
};

The object would get updated whenever a new user is added

I'm iterating this object using ng-repeat to present the data in a tabular format,

<table>
 <thead>
   <tr>
    <td>Name</td>
    <td>Company</td>
   </tr>
 </thead>
 <tbody>
   <tr ng-repeat="(key, value) in data">
     <td>{{$parent.data[key].name}}</td>
     <td>{{$parent.data[key].Company}}</td>
   </tr>
 </tbody>
</table>

What i'm trying to see in the table is, since "user1" and "user2" has same names i want that to be printed once with a rowspan of 2. is that something possible?

With this data the table would look like this,

what i try to get is,

http://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter — Dave, Mar 24 '16 at 21:51

score 0 · Answer 1 · answered Mar 24 '16 at 21:46

You are seeing that because you are probably putting user's "name" in user1 variable. please correct me if i am wrong

use something like this

data = {};

data[user1+""+data.length()] = {
 name:  "apple",
 Company: "001"
};

or use a incremental variable

var i = 0;
data = {};

data[user1+""+i] = {
 name:  "apple",
 Company: "001"
}; 
i++;

or remove user1 completely

var i = 0;
data = {};

data[i] = {
 name:  "apple",
 Company: "001"
};
i++
data[i] = {
 name:  "apple",
 Company: "002"
};

score 0 · Accepted Answer · answered Mar 24 '16 at 22:10

0

I don't see an easy way to use rowspan. But you can use the groupBy filter provided by angular.filter to do this:

  <table>
    <tr ng-repeat='(key, value) in data | groupBy: "name"'>
      <td>{{key}}</td>
      <td>
        <table>
          <tr ng-repeat='item in value'>
            <td>{{item.Company}}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

Here is a plunk to demonstrate.

answered Mar 24 '16 at 22:10

Dave

4,375
3
24
30

I implemented the above solution and it works... Thank you. I just have another question, is there a possibility to access the child's ng-repeat $index in parent.. i know for the other way there is $parent.$index, similarly if we need to access child's index in parent, is that something feasible. – Sai Mar 26 '16 at 03:51
i was just trying to add an ng-click and pass the company name as a parameter, like below `

{{key}}

{{item.Company}}

` – Sai Mar 26 '16 at 04:09

Angularjs ng-repeat object - duplicate values

2 Answers2