unique filter not working properly in Angular.js

Question

I have a simple example where I am exptecting my paragraphs to filter out values based on unique age, but I get the unknown provider error. How ?

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <p ng-repeat="x in persons | unique: 'age'">{{x.name}}</p>
<script>
//App declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.persons = [{name: "Peter",age:23},{name:"Laila",age:25},{name:"Rosy",age:23}];
});
</script>
</body> 
</html>

Angular doesn't have a unique filter. docs.angularjs.org/api/ng/filter — Matthew Green
– Matthew Green, Commented Apr 15, 2016 at 16:11
I'm almost certain this is an angularui filter, not aware of a native one :) — Guy Nesher
– Guy Nesher, Commented Apr 15, 2016 at 16:12
There is no unique filter in angular (do search in cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js). Try using these utils github.com/a8m/angular-filter — sbedulin
– sbedulin, Commented Apr 15, 2016 at 16:15

Pratik Bhattacharya · Accepted Answer · 2016-04-15 16:17:39Z

2

You need to inject 'ui.directives' and 'ui.filters' module to your app

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

Since ui.directives and ui.filters modules are present in AngularUI, you will also need to refer angular-ui.js in your application

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

Your full code should look something like this

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <p ng-repeat="x in persons | unique: 'age'">{{x.name}}</p>
<script>
//App declaration
var app = angular.module('myApp',['ui.directives','ui.filters']);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.persons = [{name: "Peter",age:23},{name:"Laila",age:25},{name:"Rosy",age:23}];
});
</script>
</body> 
</html>

answered Apr 15, 2016 at 16:17

Pratik Bhattacharya

3,7562 gold badges38 silver badges66 bronze badges

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

2 Comments

sbedulin Over a year ago

I don't think you need ui.directives module here, and ui version is very outdated v0.4.0 - 2013-02-15. It doesn't mean that unique won't work, but rather than adding overkill dependency, it's better to use just the filter, or write your own.

Pratik Bhattacharya Over a year ago

@sbedulin I agree with you. I gave the answer cause the question was why the unknown provider error was being thrown.

Vermicello · Accepted Answer · 2016-04-15 16:14:32Z

2

That because the unique filter can currently be found as part of AngularJs UI Utils. To make this work you must include it as an additional reference in your module angular.module('myApp', ['ui', 'ui.filters']);

Hope this help you.

answered Apr 15, 2016 at 16:14

Vermicello

3081 gold badge6 silver badges11 bronze badges

Collectives™ on Stack Overflow

unique filter not working properly in Angular.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related