Question

我正在尝试输出具有特定血型的对象。我正在使用过滤器。

我收到重复错误。我使用了chrome调试器，发现它执行了多次。数据在每次迭代中传递给过滤器，过滤器每次都从头开始完成它的完整工作。

这是我的过滤方法

Filters.filter('bloodFilter', function() {
  var i, filtered = [];
  return function(data, bloodGroup) {
    if (!data) {
      data = GitHub.USERS;
    }
    if (!bloodGroup) {
      bloodGroup = 'O+'
    }
    for (i = 0; i < data.length; i += 1) {
      var value = data[i];

      if (value.blood === bloodGroup) {
        filtered.push(value);
      }
    }
    return filtered;
  }
});

这是我的数据

GitHub.USERS = [
  {
    fname: "Usman",
    lname: "Tahir",
    blood: "O+"
  },
  {
    fname: "Ali",
    lname: "Hassan",
    blood: "B+"
  },
  {
    fname: "Aqib",
    lname: "Javed",
    blood: "AB+"
  }

];

这是我的控制器

Controllers.controller('BodyController', function($scope) {
  $scope.users = GitHub.USERS;
});

这是我的索引代码

  <body ng-controller="BodyController">    
    <ul>
       <li ng-repeat="item in users | bloodFilter">
         <b>{{item.fname}}</b> {{item.lname}} {{item.blood }}
       </li>
    </ul>
  </body>

Answer 1

问题与JavaScript Closures有关。我定义了数组返回创建问题的外部返回块。

我的过滤器功能应该是这样的，i和filtered应该在返回块内。

Filters.filter('bloodFilter', function() {
  return function(data, bloodGroup) {
    var i, filtered = [];
    if (!data) {
      data = GitHub.USERS;
    }
    if (!bloodGroup) {
      bloodGroup = 'O+'
    }
    for (i = 0; i < data.length; i += 1) {
      var value = data[i];

      if (value.blood === bloodGroup) {
        filtered.push(value);
      }
    }
    return filtered;
  }
});

应用过滤器重复ng-repeat

1 个答案: