CODEWITHSUNDEEP
javascriptangularjs
Lola
Lola

Reputation: 2648

AngularJS: ng-repeat without similar key

I have list of objs:

[{
 key:test1
 name: name1
},
{
 key:test1
 name: name2
},
{
 key:test2
 name: name3
}]

And i use ng-repeat to display it:

<tr ng-repeat=item in list>
  <td>{{item.key}}</td>
  <td>{{item.name}}</td>
</tr>

Is it possible to combine values with similar keys without changing the structure? not to be displayed twice test1 in my case

now:

test1 : name1

test1 : name2

test2 : name3


desired result:

test1 : name1

_____  name2

test2 : name3

Upvotes: 0

Views: 154

Answers (5)

Raghav
Raghav

Reputation: 1229

You can try this:

var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
    $scope.items = [{
     "key":"test1",
     "name": "name1"
    },
    {
     "key":"test1",
     "name": "name2"
    },
    {
     "key":"test2",
     "name": "name3"
    }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="item in items | groupBy: 'key'">
    	<h3>Key : {{item[0].key}}</h3>
      <p>Names : <span ng-repeat='i in item'>{{i.name}} </span></p>
    </div> 
</div>

Upvotes: 0

Md. Al-Amin
Md. Al-Amin

Reputation: 1441

Before using ng-repeat update the list. 

function rd(o, k, v) {
   var n = [];
   var l  = {};

   for(var i in o) {
      if (l.hasOwnProperty(o[i][k])){
         o[i][v] =  l[o[i][k]][v]+ " " +  o[i][k]
         l[o[i][k]] = o[i]
      } else{
         l[o[i][k]] = o[i];
      }
   }

   for(i in l) {
      n.push(l[i]);
   }
   return n;
}

var list = rd(arr, "key", "name");

Upvotes: 0

Slava Utesinov
Slava Utesinov

Reputation: 13488

You can use groupBy filter:

angular.module('app', ['angular.filter']).controller('ctrl', function($scope){
  $scope.list = [{
     key:'test1',
     name: 'name1'
    }, {
     key:'test1',
     name: 'name2'
    },{
     key:'test1',
     name: 'name3'
    },{
     key:'test2',
     name: 'name4'
    }];
})
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>

<table ng-app='app' ng-controller='ctrl'>
  <tbody>
    <tr ng-repeat-start="(key, value) in list | groupBy: 'key'">      
      <td>{{key}}</td>
      <td>{{value[0].name}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat='item in value.splice(1)'>
      <td></td>
      <td>{{item.name}}</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Here is how you can achieve the common key value in a same place using angular-filter:

angular.module('app',['angular.filter']).controller('mainCtrl', function($scope){$scope.list = [{
       key:'test1',
       name: 'name1'
      },
      {
       key:'test1',
       name: 'name2'
      },
      {
       key:'test2',
       name: 'name3'
      }]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>


<div ng-app='app' ng-controller='mainCtrl'>
    <div ng-repeat="(key, value) in list | groupBy: 'key'">
      <span ng-repeat='val in value'>{{val.name}} </span>
    </div>     
</div>

Upvotes: 1

Ravi Teja
Ravi Teja

Reputation: 659

ng-repeat="item in list | unique:'key'"

Upvotes: 1

Related Questions