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

时间:2015-05-20 07:16:09

标签: javascript angularjs

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

我在这里做错了什么?

2 个答案:

答案 0 :(得分:0)

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

&#13;
&#13;
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;
    }
  });
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我设法在angular.isArray(data)为真时执行代码,自己解决问题。我不知道为什么会这样,但至少它确实如此......

    angular.module("customFilters", [])
        .filter("mainGroups", function() {
            return function(data) {
                if (angular.isArray(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;
                } else {
                  return data;
                }
        });