CODEWITHSUNDEEP
arraysangularjs
VirtualLife
VirtualLife

Reputation: 402

Angular, how to initially show the first set of data in an array and allow a click even to change the array index

New to angular. Found a couple similar examples, but having some issues.

Essentially trying to create a thumbnail image list with the selected full size image shown. Mostly like what amazon has.

Have a data structure like this:

this.imgList = [
    {imgTitle: 'title', imgDescription: 'description', imgUrl: '1.jpg', imgTnUrl: '1tn.jpg'},
    {imgTitle: 'title', imgDescription: 'description', imgUrl: '2.jpg', imgTnUrl: '2tn.jpg'}

The examples I've seen use ng-repeat, but those seem to load all the full size images before a click event happens. Found a couple libraries that don't use ng-repeat, but can't get those to work.

Would have thought I could do something like {{x.imgList[0].imgTitle}}, but not sure how to change it after someone clicks a thumbnail.

Is there an easy way to do something similar without pre-loading all the images?

Upvotes: 0

Views: 61

Answers (1)

Kyle Mills
Kyle Mills

Reputation: 373

In angular you can create a controller that has a injected $scope. 

$scope.imgList = [
{imgTitle: 'title', imgDescription: 'description', imgUrl: '1.jpg', imgTnUrl: '1tn.jpg'},
{imgTitle: 'title', imgDescription: 'description', imgUrl: '2.jpg', imgTnUrl: '2tn.jpg'}

$scope.showFullSize = false;

Then in your template you can use the scope variable similar to how you had above except with the use of the ng-src directive and ng-if to render or not render the image.

<img ng-if="showFullSize" ng-src="{{imgList[iterator].imgUrl}}"/>
<img ng-if="!showFullSize" ng-src="{{imgList[iterator].imgTnUrl}}"/>

Additionally, you can define your logic to set the showFullSize property which will show/not show the full size image. If you want the request to be made to pull the image you can use the angular show/hide directives in place of the if.

Upvotes: 1

Related Questions