Angular remove element from dom if src does not exist

Question

I have an img element with the ng-src attribute that will show / hide if there is a model image image, something like the following:

<img ng-show="model.image" ng-src="img/{{model.image}}"/> 

which works great. But he obviously still makes a GET request to the server for "... img /" when there is no image value. How can I stop him from executing this request? I assume that I need to conditionally remove an element from the DOM and should put my DOM manipulation in a directive, but I'm not sure how to do this. Greetings.

Answer 1

Angular 1.1.5 introduced the ng-if directive to conditionally remove an element from the DOM. You need to use it instead of ng-show.

If you are using an older version of Angular, consider the angular -ui ui-if directive.