Unknown provider: uniqueFilterProvider <- uniqueFilter

Question

Here is my skills

<p>[[ skills ]]</p>

Result

[{"id":17,"type":"Content Management","name":"NPM","value":"84","description":null,"img_path":null,"created_at":"2017-03-08 14:00:26","updated_at":"2017-03-09 15:25:50"},{"id":16,"type":"Content Management","name":"Composer ","value":"80","description":null,"img_path":null,"created_at":"2017-03-08 14:00:14","updated_at":"2017-03-09 13:16:54"},{"id":15,"type":"Framework","name":"AngularJS","value":"73","description":null,"img_path":null,"created_at":"2017-03-08 13:59:00","updated_at":"2017-03-08 13:59:30"},{"id":14,"type":"Content Management","name":"RequireJS","value":"65","description":null,"img_path":null,"created_at":"2017-03-08 13:58:06","updated_at":"2017-03-09 13:17:10"},{"id":9,"type":"Content Management","name":"Bower","value":"70","description":null,"img_path":null,"created_at":"2017-03-08 13:54:53","updated_at":"2017-03-09 13:17:02"},{"id":8,"type":"Web Scaffolding","name":"Yeoman","value":"50","description":null,"img_path":null,"created_at":"2017-03-08 13:54:43","updated_at":"2017-03-09 13:09:57"},{"id":7,"type":"Build System","name":"Gulp","value":"90","description":null,"img_path":null,"created_at":"2017-03-08 13:54:18","updated_at":"2017-03-09 13:07:20"},{"id":6,"type":"Development Environment","name":"Docker","value":"60","description":null,"img_path":null,"created_at":"2017-03-08 13:53:59","updated_at":"2017-03-09 14:15:38"},{"id":5,"type":"Development Environment","name":"Vagrant","value":"70","description":null,"img_path":null,"created_at":"2017-03-08 13:53:46","updated_at":"2017-03-08 13:53:46"},{"id":3,"type":"Build System","name":"Grunt ","value":"88","description":null,"img_path":null,"created_at":"2017-03-08 13:49:40","updated_at":"2017-03-09 12:01:04"},{"id":2,"type":"Server Management","name":"Linux","value":"87","description":null,"img_path":null,"created_at":"2017-03-08 13:45:34","updated_at":"2017-03-09 14:15:27"},{"id":1,"type":"Framework","name":"Laravel 5","value":"95","description":null,"img_path":null,"created_at":"2017-03-08 13:24:16","updated_at":"2017-03-09 14:15:14"}]

<p ng-repeat="skill in skills | unique:'skill.type' ">[[ skill.type ]]</p>

Result

Unknown provider: uniqueFilterProvider <- uniqueFilter

I already have these on top of my file, and I got no 404 on my console, so I assume, I linked them properly.

myApp

"use strict";

var myApp = angular.module('myApp', ['angular.filter','ui'], function($interpolateProvider,$httpProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');

    //Setting headers
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    $httpProvider.defaults.headers.common['X-Requested-With'] = "XMLHttpRequest";
    $httpProvider.defaults.headers.post['X-CSRF-TOKEN'] = $('meta[name=_token]').attr('content');


});

What else should I check or look into ?

You need to inject ui module in your app like this: var myApp = angular.module('myApp', ['ui']). Also, reference this in your script tag: //rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js — clever_bassi, Mar 09 '17 at 21:04
The `unique` filter is one of your own or is it from a 3rd party? — lealceldeiro, Mar 09 '17 at 21:14

clever_bassi · Accepted Answer · 2017-03-10T04:14:07.430

I just created this working demo. See this plunker. You need to do the following steps to get your code to work: The html looks like this:

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" context="anonymous" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5" data-require="angular.js@*" context="anonymous"></script>
    <script data-require="bootstrap@*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" context="anonymous"></script>
    <script data-require="angular-ui@*" data-semver="0.4.0" src="//rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js" context="anonymous"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="UniqueCtrl">
          {{header}}
          <div>
            <li ng-repeat="item in items|unique">{{item}}</li>
          </div>
  </body>
</html>

The script.js file looks like this:

var myApp = angular.module('myApp', ['ui'])
.controller('UniqueCtrl', function($scope){
  $scope.header = "Unique Values";
  $scope.items = ["obj","obj1","obj2","obj", "obj"];
});

The key points are:

Add angular-ui.js to your scripts section. You rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js
You need to inject it into your application as a dependency. Here's how you will do that:

var myApp = angular.module('myApp', ['ui'])

Update:

I changed my array to be an array of objects and got it working with your data. Here is my plunker. It gives the output like you want:

I saw your is working. Mine is an array of object. Can you please make your work with my data so I can follow exact same thing that you did. — code-8, Mar 09 '17 at 21:46

score 0 · Answer 2 · answered Oct 16 '17 at 06:25

None of the filters in this question worked fixed my issue so I had to copy the filter from official github doc. And then use it as explained in the answers in the above question

angular.module('yourAppNameHere').filter('unique', function () {

return function (items, filterOn) {

if (filterOn === false) {
  return items;
}

if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
  var hashCheck = {}, newItems = [];

  var extractValueToCompare = function (item) {
    if (angular.isObject(item) && angular.isString(filterOn)) {
      return item[filterOn];
    } else {
      return item;
    }
  };

  angular.forEach(items, function (item) {
    var valueToCheck, isDuplicate = false;

    for (var i = 0; i < newItems.length; i++) {
      if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
        isDuplicate = true;
        break;
      }
    }
    if (!isDuplicate) {
      newItems.push(item);
    }

  });
  items = newItems;
}
return items;
  };

});

Unknown provider: uniqueFilterProvider <- uniqueFilter

2 Answers2

Linked