javascript - 传递给自定义过滤器的数据未定义

Question

我是 AngularJS 的新手，所以如果我问了一些愚蠢的问题(我可能会这样做)，我很抱歉。

我创建了一个自定义过滤器:

angular.module("customFilters", [])
    .filter("mainGroups", function() {
        return function(data) {
            var results = [];
            console.log(data);
            for (var i = 0; i < data.length; i++) {
                if (data[i].mainGroup == 1 || data[i].mainGroup == 2 || data[i].mainGroup == 3) {
                    results.push(data[i]);
                }
            }

            return results;
        }
    });

我正在应用这个过滤器:

ng-options="group.description for group in data.mainGroups.itemMainGroups | mainGroups | orderBy: 'description'"

在控制台中(通过 console.log)我可以清楚地看到数据是一个包含 15 个对象的数组。 Angular.isArray(data) 也返回 true。尽管如此，我还是遇到了这些错误:

TypeError: Cannot read property 'length' of undefined

我在这里做错了什么？

Answer 1

您的过滤器似乎有效。可能是数据问题。

angular.module("customFilters", [])
  .controller('myController', function($scope) {
    $scope.data = [{
      id: 1,
      mainGroup: 1, 
      description : 'M'
    }, {
      id: 2,
      mainGroup: 2, 
      description : 'N'
    }, {
      id: 3,
      mainGroup: 3, 
      description : 'A'
    }, {
      id: 4,
      mainGroup: 4, 
      description : 'H'
    }, {
      id: 5,
      mainGroup: -1, 
      description : 'S'
    }, {
      id: 6,
      mainGroup: 1, 
      description : 'B'
    }, {
      id: 7,
      mainGroup: 2, 
      description : 'R'
    }, {
      id: 8,
      mainGroup: 3, 
      description : 'G'
    }, ];
  })
  .filter("mainGroups", function() {
    return function(data) {
      var results = [];
      console.log(data);
      for (var i = 0; i < data.length; i++) {
        if (data[i].mainGroup == 1 || data[i].mainGroup == 2 || data[i].mainGroup == 3) {
          results.push(data[i]);
        }
      }

      return results;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="customFilters" ng-controller="myController">
  <select ng-model="myColor" ng-options="group.description for group in data | mainGroups | orderBy:'description'" ></select> <span>Show 6 out of 8 entries</span>
  <div ng-repeat="item in data | mainGroups"><pre ng-bind="item | json"></pre>
  </div>
</div>