'ng-repeat' How to get unique values

Question

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

But I get an error.

Here is my attempt (I'm filtering SubProjectName )

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

Live demo

Answer 1

AngularJS does not include a unique filter by default. You can use one of angular-filter . Just enable javascript

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

and enable the dependency in your application:

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

Your code should work right away! I edited your Plunker to make it work.

Answer 2

I think you are looking for such an answer

 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

Answer 3

The unique filter that you are probably trying to use comes from AngularUI, so you need to enable it:

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

and add it as a module dependency:

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

Answer 4

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

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

Hope this helps you.