独特的过滤器在Angular.js中无法正常工作

时间:2016-04-15 16:05:31

标签: javascript angularjs

我有一个简单的例子,我在检查我的段落以根据唯一年龄筛选出值,但是我得到了未知的提供程序错误。怎么样 ?

<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> 

enter image description here

2 个答案:

答案 0 :(得分:2)

这是因为当前可以将唯一过滤器作为AngularJs UI Utils的一部分找到。 要使其发挥作用,您必须将其作为模块angular.module('myApp', ['ui', 'ui.filters']);

中的附加参考

希望这对你有所帮助。

答案 1 :(得分:2)

您需要将“ui.directives”和“ui.filters”模块注入您的应用

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

由于AngularUI中存在ui.directives和ui.filters模块,因此您还需要在应用程序中引用angular-ui.js

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

您的完整代码应如下所示

<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>