Prevent images from loading in an AngularJS view if scope variable is empty

Question

Given this view markup, I'm linking to an image on the server dynamically using values in the scope. Upon first loading the page, images is empty, so the second div is displayed to say there are no images. However, since the first div contains an img tag, it attempts to download the image from the server when the view itself is downloaded by the browser. I've tried wrapping the anchor and image tag in a div with ng-if="image", but that doesn't fix it.

<div>

    <form role="form" class="search">
        <div class="input-group-lg input-group">
            <input type="text" class="form-control" placeholder="Order Number ex: 0479493" ng-model="orderNumber">
            <span class="input-group-btn">
                <button type="submit" class="btn btn-primary" ng-click="search()">Search</button>
            </span>
        </div>
    </form>

    <div ng-show="images.length > 0">
        <div class="well image-descriptor" ng-repeat="image in images">
            <p><strong class="col-sm-2">Name:</strong> {{ image.name }}</p>
            <p><strong class="col-sm-2">Index:</strong> {{ image.index }}</p>
            <p><strong class="col-sm-2">Pages:</strong>{{ image.pages.length }}</p>
            <p><strong class="col-sm-2">Path:</strong> {{ image.path }}</p>
            <p><strong class="col-sm-2">Type:</strong> {{ image.type }}</p>
            <div ng-if="image">
                <a ng-repeat="p in image.pages" href="/api/images/{{ orderNumber }}/{{ image.index }}/{{ p }}" target="_blank">
                    <img width="200" height="259" src="/api/images/{{ orderNumber }}/{{ image.index }}/{{ p }}">
                </a>
            </div>
        </div>
    </div>
    <div ng-hide="images.length > 0">
        <div class="well well-lg bg-info center-block">
            <p>No images found.</p>
        </div>
    </div>
</div>

What about ng-if="images.length"

tymeJV
– tymeJV

2014-07-25 19:24:06 +00:00
Commented Jul 25, 2014 at 19:24 — tymeJV
– tymeJV, Commented Jul 25, 2014 at 19:24

V31 · Accepted Answer · 2014-07-25 19:29:34Z

4

First you need to use ng-src and try to use ng-show on the img tag itself

<img width="200" height="259" ng-show="image" ng-src="/api/images/{{ orderNumber }}/{{ image.index }}/{{ p }}" />

answered Jul 25, 2014 at 19:29

V31

7,6643 gold badges28 silver badges44 bronze badges

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

1 Comment

Patrick Grimard Over a year ago

I put ng-show on the main div because I'm iterating over an array of images that will either contain data or not. In the event it doesn't, then the second div saying "No images found" gets display. Thanks again for the tip :)

Collectives™ on Stack Overflow

Prevent images from loading in an AngularJS view if scope variable is empty

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related