Question

当用户单击链接时，我在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);
}
}]);

我已将'$http','$filter'包含在控制器中。是否有输入？

Answer 1

您的问题不在于$ filter我看到的错误是

无法读取未定义的属性“过滤器”

这是指javascript方法filter，而不是AngularJS的'$ filter'。筛选器是可以在数组上调用的JavaScript方法。似乎也没有必要在这里执行JSON.stringify。试试这个

$scope.defferedList =  $scope.myListObj.filter(function( obj ) {
    console.log(obj.labels.includes('deffered'));
    return obj.labels.includes('deffered');
});

Answer 2

我做了一个快速更改，因为我认为这是您真正想要的。

基本上，您没有使用$ 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>

Answer 3

这可以通过编写如下的showList方法来纠正

function tab_panel

  hFigure = figure('Units', 'pixels', 'Position', [200 200 320 320]);

  hPanel1 = uipanel(hFigure, 'Units', 'pixels', 'Position', [10 10 300 270], ...
                    'BackgroundColor', 'r');
  hPanel2 = uipanel(hFigure, 'Units', 'pixels', 'Position', [10 10 300 270], ...
                    'BackgroundColor', 'g', 'Visible', 'off');
  hPanel3 = uipanel(hFigure, 'Units', 'pixels', 'Position', [10 10 300 270], ...
                    'BackgroundColor', 'b', 'Visible', 'off');

  hGroup = uibuttongroup(hFigure, 'Units', 'pixels', 'Position', [10 280 300 30], ...
                         'BorderType', 'none', 'SelectionChangedFcn', @switch_panel);
  hButton1 = uicontrol(hGroup, 'Style', 'toggle', 'Position', [0 0 40 30], ...
                       'String', 'Red');
  hButton2 = uicontrol(hGroup, 'Style', 'toggle', 'Position', [40 0 40 30], ...
                       'String', 'Green');
  hButton3 = uicontrol(hGroup, 'Style', 'toggle', 'Position', [80 0 40 30], ...
                       'String', 'Blue');

  function switch_panel(~, eventData)  % Nested callback function
    switch eventData.NewValue
      case hButton1
        set(hPanel1, 'Visible', 'on');
        set([hPanel2 hPanel3], 'Visible', 'off');
      case hButton2
        set(hPanel2, 'Visible', 'on');
        set([hPanel1 hPanel3], 'Visible', 'off');
      case hButton3
        set(hPanel3, 'Visible', 'on');
        set([hPanel1 hPanel2], 'Visible', 'off');
    end
  end

end

该错误基本上是因为您试图在$ scope.myListObj的字符串化版本上而不是实际数组上应用针对数组类型的筛选操作。

此外，由于您正在使用数组对象的filter方法，因此不需要“ $ filter”作为模块的依赖项。

TypeError：无法读取未定义的属性“ $ filter”

3 个答案: