Currently, I am using ng-repeat to display a list of available supermarket items. These items are fetched in JSON format using $http and stored in $scope.items. The ng-repeat function is working perfectly in displaying all the items. However, my challenge lies in limiting the number of displayed items to only 3 out of the 20 available items. I have attempted to use a limitTo filter without success. Despite specifying the filter, the screenshot provided shows that all items are still being displayed:
https://i.sstatic.net/Ogyrq.png
Below is the snippet of the HTML code I am using:
<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>
Any assistance on this issue would be greatly appreciated.
EDIT:
Just to provide more context, I want to clarify that I have replaced {{ with {[{ in AngularJS to avoid conflicts with Twig.
The 'items' variable is initialized as an array in the controller:
$scope.items = [];
Here is the JSON data received from the AJAX request:
Despite AngularJS working correctly in other scenarios, it seems to be facing an issue specifically with this particular case.