未知提供商：uniqueFilterProvider < - uniqueFilter

這裏是我的技能未知提供商：uniqueFilterProvider < - uniqueFilter

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

結果

[{"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>

結果

未知提供商：uniqueFilterProvider < - uniqueFilter

我已經有這些對我的文件的頂部，我得到了我的控制檯上沒有404，所以我想，我掛他們正確。

對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'); 


});

還有什麼我應該檢查或調查？

來源

2017-03-09 ihue

你需要注入UI模塊在你的應用程序是這樣的：var對myApp = angular.module（ '對myApp'，[ 'UI']）。另外，請在您的腳本標記中引用：//rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js –

「獨特」過濾器是您自己的過濾器之一，還是來自第三方？ – lealceldeiro

@clever_bassi：是否更新了我的鏈接，仍然得到這個技能的<！ - ngRepeat：skill | unique：'skill.type' - >' – ihue

我剛創建了這個工作演示。請參閱this重跳。你需要做下面的步驟讓你的代碼工作：的HTML如下：

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]*" 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="[email protected]*" context="anonymous"></script> 
    <script data-require="[email protected]*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" context="anonymous"></script> 
    <script data-require="[email protected]*" 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>

的的script.js文件看起來是這樣的：

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

的關鍵點是：

將angular-ui.js添加到您的腳本部分。您rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js
您需要將它作爲依賴注入到您的應用程序中。這裏是你將如何做到這一點：

VAR對myApp = angular.module（ '對myApp'，[ 'UI']）

更新：

我改變了我的數組是數組對象，並讓它處理你的數據。 Here是我的重頭戲。它給像你輸出想要的：

來源

2017-03-09 21:26:01

我看到你正在工作。我是一個對象數組。你可以請你用我的數據做你的工作，這樣我就可以按照你所做的完全一樣的東西了。 – ihue

在this question worked過濾器的無固定我的問題，所以我不得不將過濾器從官方github doc.副本，然後用它作爲對上述問題

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

的答案解釋

返回功能（項目，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; 
    }; 

});

來源

2017-10-16 06:25:13

未知提供商：uniqueFilterProvider < - uniqueFilter

回答

相關問題