Question

我在控制器中将一组对象分配给$scope，并在部分模板中的一系列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过滤器for循环的entityType错误。如果我将这些过滤器包装在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会将未定义的item传递给过滤器？如果只是在我的两个ng-repeat s中明确地调用这些过滤器，那么这些过滤器还可以被调用吗？

Answer 1

是否可以安全地假设通过过滤器的数据是异步从服务器检索的？当页面首次渲染时，angular会遍历所有内容，但还没有数据，所以它是未定义的。一旦数据返回，它再次经历摘要循环，然后这次有数据，所以一切正常。因此，在过滤函数的开头进行定义检查是个好主意。

Answer 2

当页面呈现时，Angular会检查所有内容。如果在初始阶段数据变空，那么你应该检查未定义。

      app.filter('greaterThenHundred', function () {
    return function (items) {

        if (items == undefined)
            items = [];
        var filtered = [];
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item.Salary > 100) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

AngularJS - 由于未定义的数组而导致的自定义过滤器错误，仍然可以正常过滤？

2 个答案: