编辑：

Question

我在列表项上使用ng-repeat来显示可用的超市商品。使用$ http作为JSON检索项目并存储在$ scope.items中，并且ng-repeat正常工作以显示所有这些项目。我的问题是有20个这样的项目，我想限制显示的数量，比如说3.我试图使用limitTo过滤器无济于事。这是一个屏幕截图，显示了显示的项目，但没有限制，尽管指定了过滤器：

http://i.imgur.com/4HiSdoG.png

我的HTML如下：

<span class="item-choices-choice pull-left">
    <ul>
         <li ng-repeat="choice in items.0 | limitTo:3">
             <img src="{[{ choice.ImagePath }]}" class="img-rounded" /> {[{ choice.Name }]} <strong>{[{ choice.Price }]}</strong>
         </li>
    </ul>
</span>

感谢您的帮助

编辑：

我将尝试解释更多的事情：我已经重新分配{{to {[{在AngularJS中，因为它与Twig冲突。

项目在控制器中设置为数组：

$scope.items = [];

这是我从AJAX请求中收到的JSON：

http://pastebin.com/ZN6ipRKQ

此JSON由$ http解释并分配给$ scope.items [0]。除了这个之外，AngularJS似乎在每种情况下都能正常工作。

Answer 1

我找到了问题。

看来，如果你在PHP中对一个ArrayIterator进行json_encode，它会把它编码为一个对象而不是一个数组中的对象。这似乎导致Angular中的limitTo（和其他）过滤器的问题无法正常工作。

将ArrayIterator转换为普通的PHP数组并运行json_encode后，限制就可以了。

Answer 2

您的插值语法错误。你的花括号之间有方括号。

<img src="{[{ choice.ImagePath }]}" class="img-rounded" /> {[{ choice.Name }]} <strong>{[{ choice.Price }]}</strong>

需要成为

<img src="{{ choice.ImagePath }}" class="img-rounded" /> {{ choice.Name }} <strong>{{ choice.Price }}</strong>

我解决了这个问题后，this codepen对我有用。

AngularJS ngRepeat不尊重limitTo过滤器

编辑：

2 个答案: