Implementing a feature to load sets of images on button click instead of loading all at once. Although lazy load plugins are available, I decided to experiment with this approach.
Here's the logic: Start with a data array called 'Images' containing 30 images. Create a temporary array 'temp' bound to the list item and populate it with a set of 4 images from 'Images' upon button click.
However, when I click the button, the images briefly appear and then disappear. What mistake am I making?
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in temp">
<img ng-src="{{image.src}}" />
</li>
</ul>
<button class="btn btn-default" ng-click="loadMore()">LOAD MORE</button>
</div>
<script type="text/javascript">
var DemoApp = angular.module("DemoApp", []);
DemoApp.controller("DemoController",
function DemoController($scope) {
$scope.quantity = 0;
$scope.temp = [];
$scope.loadMore = function () {
for (i = $scope.quantity; i <= $scope.quantity + 1; i++)
{
$scope.temp.push($scope.images[i]);
}
$scope.quantity = i;
}
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" },
{ "src": "Images/3.jpg" },
......
{ "src": "Images/4.jpg" }
];
});
</script>
The code works fine in a fiddle but not on my actual webpage.