TypeError: Cannot read property '$filter' of undefined
TypeError: Cannot read property '$filter' of undefined
当用户单击 link 时,我在 UI 上显示 json 对象,下面是它显示的异常
TypeError: Cannot read property '$filter' of undefined
演示:http://plnkr.co/edit/5NOBQ3rzE3EFwTnuLbXG?p=preview
示例 js 代码:
app.controller('BaseCtrl', ['$scope','$http','$filter', function($scope,$http,$filter) {
$scope.myList = [{"sId":100,"spread":"21x","owner":"Michael","labels":"deffered incomplete"},
{"sId":101,"spread":"34","owner":"Steve","labels":"complete"},
{"sId":102,"spread":"90s","owner":"John","labels":"tested"},
{"sId":103,"spread":"332","owner":"Dex","labels":"complete deffered"}
];
//$scope.myListObj;
$scope.showList = function(myListObj){
console.log("myListObj " + JSON.stringify(myListObj));
// $scope.defferedList = $scope.myListObj.filter(function( obj ) {
$scope.defferedList = JSON.stringify($scope.myListObj).filter(function( obj ) {
console.log(obj.labels.includes('deffered'));
return obj.labels.includes('deffered');
});
console.log("defferedList :: " + $scope.defferedList);
}
}]);
我在 controller.Any 输入中包含了 '$http','$filter'
?
你的问题不在于 $filter 我看到的错误是
Cannot read property 'filter' of undefined
这是指 javascript 方法 filter 而不是 AngularJS 的“$filter”。 Filter 是一种可以在数组上调用的 javascript 方法。似乎也没有必要在这里做 JSON.stringify 。试试这个
$scope.defferedList = $scope.myListObj.filter(function( obj ) {
console.log(obj.labels.includes('deffered'));
return obj.labels.includes('deffered');
});
我做了一个快速的改变,因为我认为这就是你真正想要的。
基本上,您没有使用 $filter,而是试图过滤其原型中没有该方法的类型。如果您不进行字符串化,它将按预期工作。
var app = angular.module('myApp', []);
app.controller('BaseCtrl', ['$scope','$http', function($scope,$http) {
$scope.myList = [{"sId":100,"spread":"21x","owner":"Michael","labels":"deffered incomplete"},
{"sId":101,"spread":"34","owner":"Steve","labels":"complete"},
{"sId":102,"spread":"90s","owner":"John","labels":"tested"},
{"sId":103,"spread":"332","owner":"Dex","labels":"complete deffered"}
];
//$scope.myListObj;
$scope.showList = function(myListObj){
console.log("myListObj " + JSON.stringify(myListObj));
// $scope.defferedList = $scope.myListObj.filter(function( obj ) {
$scope.defferedList = myListObj.filter(function( obj ) {
console.log(obj.labels && obj.labels.includes('deffered'));
return obj.labels && obj.labels.includes('deffered');
});
console.log("defferedList :: ", $scope.defferedList);
}
}]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
.my-col-50{float:left;}
</style>
</head>
<body ng-app="myApp" ng-controller="BaseCtrl">
<div class="container">
<a href="javascript:void(0)" ng-click="showList(myList)">
Click here</a>
</div>
</body>
</html>
这可以通过如下编写 showList 方法来纠正
$scope.showList = function(myListObj) {
console.log("myListObj " + JSON.stringify(myListObj));
$scope.defferedList = myListObj.filter(function(obj) {
console.log(obj.labels.includes('deffered'));
return obj.labels.includes('deffered');
});
console.log("defferedList :: " + $scope.defferedList);
}
该错误基本上是因为您试图在 $scope.myListObj 的字符串化版本而不是实际数组上应用适用于数组类型的过滤操作。
此外,由于您正在使用数组对象的过滤方法,因此您不需要“$filter”作为模块的依赖项。
当用户单击 link 时,我在 UI 上显示 json 对象,下面是它显示的异常
TypeError: Cannot read property '$filter' of undefined
演示:http://plnkr.co/edit/5NOBQ3rzE3EFwTnuLbXG?p=preview
示例 js 代码:
app.controller('BaseCtrl', ['$scope','$http','$filter', function($scope,$http,$filter) {
$scope.myList = [{"sId":100,"spread":"21x","owner":"Michael","labels":"deffered incomplete"},
{"sId":101,"spread":"34","owner":"Steve","labels":"complete"},
{"sId":102,"spread":"90s","owner":"John","labels":"tested"},
{"sId":103,"spread":"332","owner":"Dex","labels":"complete deffered"}
];
//$scope.myListObj;
$scope.showList = function(myListObj){
console.log("myListObj " + JSON.stringify(myListObj));
// $scope.defferedList = $scope.myListObj.filter(function( obj ) {
$scope.defferedList = JSON.stringify($scope.myListObj).filter(function( obj ) {
console.log(obj.labels.includes('deffered'));
return obj.labels.includes('deffered');
});
console.log("defferedList :: " + $scope.defferedList);
}
}]);
我在 controller.Any 输入中包含了 '$http','$filter'
?
你的问题不在于 $filter 我看到的错误是
Cannot read property 'filter' of undefined
这是指 javascript 方法 filter 而不是 AngularJS 的“$filter”。 Filter 是一种可以在数组上调用的 javascript 方法。似乎也没有必要在这里做 JSON.stringify 。试试这个
$scope.defferedList = $scope.myListObj.filter(function( obj ) {
console.log(obj.labels.includes('deffered'));
return obj.labels.includes('deffered');
});
我做了一个快速的改变,因为我认为这就是你真正想要的。
基本上,您没有使用 $filter,而是试图过滤其原型中没有该方法的类型。如果您不进行字符串化,它将按预期工作。
var app = angular.module('myApp', []);
app.controller('BaseCtrl', ['$scope','$http', function($scope,$http) {
$scope.myList = [{"sId":100,"spread":"21x","owner":"Michael","labels":"deffered incomplete"},
{"sId":101,"spread":"34","owner":"Steve","labels":"complete"},
{"sId":102,"spread":"90s","owner":"John","labels":"tested"},
{"sId":103,"spread":"332","owner":"Dex","labels":"complete deffered"}
];
//$scope.myListObj;
$scope.showList = function(myListObj){
console.log("myListObj " + JSON.stringify(myListObj));
// $scope.defferedList = $scope.myListObj.filter(function( obj ) {
$scope.defferedList = myListObj.filter(function( obj ) {
console.log(obj.labels && obj.labels.includes('deffered'));
return obj.labels && obj.labels.includes('deffered');
});
console.log("defferedList :: ", $scope.defferedList);
}
}]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
.my-col-50{float:left;}
</style>
</head>
<body ng-app="myApp" ng-controller="BaseCtrl">
<div class="container">
<a href="javascript:void(0)" ng-click="showList(myList)">
Click here</a>
</div>
</body>
</html>
这可以通过如下编写 showList 方法来纠正
$scope.showList = function(myListObj) {
console.log("myListObj " + JSON.stringify(myListObj));
$scope.defferedList = myListObj.filter(function(obj) {
console.log(obj.labels.includes('deffered'));
return obj.labels.includes('deffered');
});
console.log("defferedList :: " + $scope.defferedList);
}
该错误基本上是因为您试图在 $scope.myListObj 的字符串化版本而不是实际数组上应用适用于数组类型的过滤操作。
此外,由于您正在使用数组对象的过滤方法,因此您不需要“$filter”作为模块的依赖项。