Question

这是filter data using dropdown?的下一步，以及callmekatootie的回答 - 插件（http://plnkr.co/edit/n7TebC）。考虑到这一点和其他一些事情，我有两个可以一起/分开的下拉菜单来过滤数据集，并且我已经应用了一个限制因此它只显示4个（然后是4个）更多关于ng-click等）。目前的插件位于：http://plnkr.co/edit/Sc283f。

如果我在示波器内设置数据（无$ http），并关闭数量限制，则两个过滤器可以完美地工作。

如果我先加上限制，就像这样：

<li data-ng-repeat="item in data | limitTo:quantity | filter:customFilter">

然后它给了我数据中的前4个项目然后应用过滤器，在某些情况下我没有得到任何东西。但如果我反过来并先得到数据：

<li data-ng-repeat="item in data | filter:customFilter | limitTo:quantity">

限制仅在第一次有效。更改过滤器和限制似乎不再定期/正确/适用。

如果我通过$ http更改数据，则无法正常工作。我只是得到整套，没有过滤器，没有限制。我可能会和/或找出解决方法和/或最终修复前两个问题（过滤器和限制），但我无法看到过滤器/限制工作（大多数情况下）的任何原因数据是本地的，但是当数据通过$ http。

进入时失败

我确定我错过了一些非常明显和简单的东西，但如果我知道的话，我会死的。任何人？

Answer 1

测试数据是一系列动物......

[
  { animal : 'dog', color : 'blue'},
  { animal : 'cat', color : 'red'}
]

但是$http下载的JSON是一个在每个属性中都有动物的对象......

{
  "0": {"title": "...", "animal": "dog", "color": "purple"},
  "1": {"title": "...", "animal": "cat", "color": "yellow"}
}

Angular的内置过滤器只接受数组，这就是为什么当你给它一个对象时它被绕过的原因。

您可以更改服务以返回数组，或者您可以使用类似函数从$http返回数据时将数据转换为数组...

function toArray(data) {
  var items = [];
  angular.forEach(data, function (value) {
    items.push(value);
  });
  return items;
}

$http.get('demo.json').success(function(data) {
  $scope.data = toArray(data);
});

Updated Plunker

当数据来自$ http时，不应用过滤器

1 个答案: