未知提供者:uniqueFilterProvider<-uniqueFilter [英] Unknown provider: 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
Unknown provider: uniqueFilterProvider <- uniqueFilter
我已经在文件顶部放置了这些文件，并且控制台上没有404，所以我认为我已正确链接了它们.
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');
});
我还应该检查或研究什么?
推荐答案
我刚刚创建了这个工作演示.参见此监听器.您需要执行以下步骤来使代码正常工作: html看起来像这样:
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>
script.js文件如下所示:
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"];
});
关键点是:
-
将angular-ui.js添加到脚本部分.你rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js
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'])
var myApp = angular.module('myApp', ['ui'])
更新:
我将数组更改为对象数组，并使其与您的数据一起使用. 这里是我的朋克.它给出您想要的输出:
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:
这篇关于未知提供者:uniqueFilterProvider<-uniqueFilter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
