I am facing a persistent issue that I have been unable to resolve, despite researching similar problems on StackOverflow.
My current project involves building an application with the MEAN stack. However, I am encountering difficulties when trying to dynamically render new items using
ng-repeat.The application retrieves a large number of items from a MongoDB database through API calls successfully.
Initially, I need to display only 24 items, with an option for users to load an additional 24 items each time they click on a "show more" button. These newly fetched items should be appended after the existing ones.
The first set of 24 items renders correctly, but subsequent items do not appear on the page.
When I log the newly fetched items, I can see their attributes without any issues.
Below is a condensed version of my items View:
<div class="myItem" ng-repeat="item in searchCtrl.items track by $index">
. . . .
</div>
This is the Show More Button:
<a class="showMoreButton" ng-click="searchCtrl.goToNextPage()">show more</a>
Here is a simplified snippet of my Controller (aka searchCtrl):
function SearchController($scope, ItemFactory) {
// Controller logic here...
}
Similarly, this is a simplified version of my ItemFactory:
angular.module('myApp').factory('ItemFactory',
function ($http, API_URL) {
// Factory code here...
});
My Controller bindings and routing are working as expected by following a modularized approach.
In attempts to solve the rendering issue, I also considered using the concat method instead of looping through items, but the result remained unchanged.
Main Issues:
- Only the initial 24 items are rendered properly.
- Subsequent items beyond the first 24 fail to show up in the DOM, even though they are added to the items array.
- Attempts to use
$scope.$apply();resulted in digest errors.
Queries:
- What could be causing this problem?
- How can I address this rendering issue effectively?
Any assistance or clarification would be greatly appreciated. Feel free to leave your comments below. Thank you!