AngularJS ngRepeat不尊重limitTo过滤器

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>

感谢您的帮助

编辑：

我将尝试解释更多内容：我已将 {{ 重新分配给 AngularJS 中的 {[{ 否则它会与 Twig 冲突。

items 在控制器中设置为数组：

$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 中对我有用。