Angularjs display images based on names in database

Question

I am attempting to display an image on a view. I have a list of image names in the database and have the actual images stored in content/images. All that is showing up when I loop through is the alternate name and I only get that once. There should be 7 images or at the very least 7 alternate names being shown.

This is the code where I am attempting to show the images -

        <div class="row">
            <div ata-ng-repeat="route in vm.routes">
                <img data-ng-src="Content/images/{{route.department.imageNameLight}}.jpg" alt="test" />
            </div>
        </div>

I have looked a vm.routes and it does have the correct information. The image name is surrounded with quotes if that makes a difference? Eventually I will have a maximum of two rows of six images either show the light version of the image or the dark depending on a status flag.

adam0101 · Accepted Answer · 2015-08-10 20:54:55Z

1

Try this:

<div class="row">
    <div ata-ng-repeat="route in vm.routes">
        <img data-ng-src="{{'Content/images/' + route.department.imageNameLight + '.jpg'}}" alt="test" />
    </div>
</div>

edited Aug 10, 2015 at 20:54

answered Aug 10, 2015 at 20:48

adam0101

31.5k22 gold badges102 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Craig Over a year ago

After a whole lot of trial and error I finally got it to work with span, but how do I split after 6 elements have been shown?

adam0101 Over a year ago

Depending on what your layout needs are, one option would be to add something like ng-style="{clear: $index % 6 == 0 ? 'left', 'none'}" to wrap it to the next line, or another option is to create your data as an array of arrays and then use two nested ng-repeats.

adam0101 Over a year ago

The first option would assume that all your divs had float: left

Collectives™ on Stack Overflow

Angularjs display images based on names in database

1 Answer 1

3 Comments

Your Answer

Collectives™ on Stack Overflow

Angularjs display images based on names in database

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related