javascript - AngularJS - 由于未定义的数组导致自定义过滤器错误并且仍然正确过滤？

Question

我有一个对象数组被分配给 $scope在 Controller 中，并在部分模板中的一系列 div 中进行过滤:

  <div class="entity-list">
    <!-- Folders -->
    <div class="entity-listing folder" ng-repeat="child in folders | filterName:nameFilter | entityType:filterType | orderBy:orderProp:orderAscDesc">
      <!-- Some HTML -->
    </div>
    <!-- Files -->
    <div class="entity-listing document" ng-repeat="child in documents | filterName:nameFilter | entityType:filterType | orderBy:orderProp:orderAscDesc">
      <!-- Some HTML -->
    </div>
  </div>

过滤器显示在单独的 fieldset 中元素:

  <fieldset id="filters">
    <legend>Filters</legend>
    <label for="filter-name">Name Contains:</label>
    <input id="filter-name" ng-model="nameFilter">
    <label for="filter-type">Show:</label>
    <select id="filter-type" ng-model="filterType">
      <!-- some options -->
    </select>
    <label for="sort-field">Sort By:</label>
    <select id="sort-field" ng-model="orderProp">
      <!-- some options -->
    </select>
    <select ng-model="orderAscDesc">
      <!-- some options -->
    </select>
  </fieldset>

我有一个设置了两个过滤器的模块，并将该模块传递到我的应用程序:

angular.module('widget', ['filters']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/homefolder', {templateUrl: 'widget/partial/entity-list.html', controller: HomeFolderCtrl}).
      when('/folder/:uuid', {templateUrl: 'widget/partial/entity-list.html', controller: FolderCtrl}).
      otherwise({redirectTo: '/homefolder'});
  }]);
angular.module('filters', []).
  filter('entityType', function() {
    return function(items, type) {
      var returnArray = [];
      for (var i=0,ii=items.length;i<ii;i++) {
        if (type == "both") {
          returnArray.push(items[i]);
        } else if (items[i].type == type) {
          returnArray.push(items[i]);
        }
      }
      return returnArray;
    }
  }).
  filter('filterName', function() {
    return function(items, str) {
      var returnArray = [];
      if (str != '') {
        for (var i=0,ii=items.length;i<ii;i++) {
          if (items[i].name.indexOf(str) !== -1) {
            returnArray.push(items[i]);
          }
        }
      } else {
        returnArray = items;
      }
      return returnArray;
    }
  });

我担心这段代码是否有效，但在查看错误控制台时，我收到一堆错误信息 Cannot read property 'length' of undefined关于 filterName和 entityType过滤器的 for 循环。如果我将这些过滤器包装在 if 语句中以检查是否 items已定义(以 filterName 为例):

  filter('filterName', function() {
    return function(items, str) {
      var returnArray = [];
      if (items) {
        if (str != '') {
          for (var i=0,ii=items.length;i<ii;i++) {
            if (items[i].name.indexOf(str) !== -1) {
              returnArray.push(items[i]);
            }
          }
        } else {
          returnArray = items;
        }
      }
      return returnArray;
    }
  });

它消除了错误并且同样有效。为什么 AngularJS 会传入 undefined item到过滤器了吗？如果仅在我的两个 ng-repeat 中显式调用这些过滤器，它们还能在哪里被调用？是吗？

Answer 1

假设通过过滤器的数据是从服务器异步检索的，这是否安全？当页面第一次呈现时，angular 遍历所有内容，还没有数据，所以它是未定义的。数据一回来，又走一遍摘要循环，然后这次就有数据了，所以一切正常。因此，在过滤器函数的开头进行定义的检查是个好主意。