Checking if an object is set in Angular

Question

I'm getting room images from a 3rd party API as json.

If the room contains images it creates a room image object inside my hotel object, otherwise it does not create the room image object.

I just want to display the first image if it is multiple - Else display an "No image available" image.

Would I be better in Angular to do the if statement before it gets to the view or do a conditional inline in the view? Or use a filter?

I know in php you can use isset. Does angular have something similar?

<img class="img-responsive" ng-src="{{room.RoomImages.RoomImage[0].url}}" />

{{(room.RoomImages.RoomImage|| [] ).length ? room.RoomImages.RoomImage[0].url : 'your img here'}} — Royi Namir
– Royi Namir, Commented Feb 3, 2016 at 8:46

Whisher · Accepted Answer · 2016-02-03 08:59:06Z

0

There is a different approach a directive like this:

return {
    restrict: 'A',
    link: function(scope, element) {
      element.on('load', function() {
        unWatch();
        //image exists
      });
      element.on('error', function() {
        unWatch();
       // fallback image
      });
      var unWatch = scope.$watch('ngSrc', function() {
        //do something ie a loader
      });
    }
};

answered Feb 3, 2016 at 8:59

Whisher

32.9k34 gold badges129 silver badges204 bronze badges

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

Collectives™ on Stack Overflow

Checking if an object is set in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related