'ng-repeat' How to get the `unique` values

Question

Using an array, I am trying to filter and show the unique information in the list. For that I use the angular inbuild filter method.

But I am getting error.

Here is my try (I am filtering by SubProjectName)

<ul>
    <li ng-repeat="project in projectNames | unique: 'SubProjectName' ">
        {project.SubProjectName}}
    </li>
</ul>

Live Demo

is it so.. then what would be the way to get it done? any one suggest me? — 3gwebtrain, Sep 29 '15 at 11:46
http://stackoverflow.com/questions/15914658/angular-js-how-to-make-ng-repeat-filter-out-duplicate-results — Sajeetharan, Sep 29 '15 at 11:48

muenchdo · Accepted Answer · 2016-06-03T09:14:09.643

20

AngularJS doesn't include a unique filter by default. You can use the one from angular-filter. Just include the JavaScript

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

and include the dependeny in your app:

var app = angular.module('myApp', ['angular.filter']);

Your code should work right away! I edited your Plunker so it works.

edited Jun 03 '16 at 09:14

answered Sep 29 '15 at 11:52

muenchdo

2,161
1
17
30

score 6 · Answer 2 · answered Sep 29 '15 at 12:24

I think you are looking for an answer like this

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.projectNames=projects
  $scope.Id = "1";
  $scope.SubProjectName="Retail Building";

})
.filter('unique', function() {
  return function(projects, subProjectName) {
    var newprojects =[];
    projects.forEach(function(project){
      if(project.SubProjectName === subProjectName)
        newprojects.push(project);
    });
    return newprojects;
  };
});

<li ng-repeat="project in projectNames | unique:SubProjectName">{{project.SubProjectName}}</li>

Demo

It is nice to do this instead of adding another package to do the same functionality — Agrejus, Apr 12 '17 at 18:44

score 3 · Answer 3 · answered Sep 29 '15 at 11:47

The unique filter you are probably attempting to use comes from AngularUI, so you need to include it:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>

and add it as module dependency:

var app = angular.module('plunker', ['ui.filters']);

score 1 · Answer 4 · answered Sep 29 '15 at 11:54

1

I have updated your plunkr as http://plnkr.co/edit/sx3u1ukH9752oR1Jfx6R?p=preview added filter dependency

var app = angular.module('plunker', ['angular.filter']);

Hope this may help you

answered Sep 29 '15 at 11:54

Jayant Patil

1,537
2
11
18

'ng-repeat' How to get the `unique` values

4 Answers4

Linked

Related