Change background image on hover with AngularJS

Question

I have a scope of 's with their background images, but I can't figure out how to make them change. I tried several variants, but none of them has passed. Here's the code:

<div ng-controller="mainController" class="main">
    <div ng-repeat="land in lands" class="col-md-9" ng-style="{ 'background-image': 'url({{ land.cover }})'}">
        <p>{{ land.name }}</p>
    </div>
</div>

Javascript:

app.controller('mainController', ['$scope', function($scope) {
    $scope.lands = [
        {
            cover: 'img/norway.jpg',
            cover1: 'img/norway1.jpg',
            name: 'Norway'
        },
        {
            cover: 'img/sweden.jpg',
            cover1: 'img/sweden1.jpg',
            name: 'Sweden'
        },
        {
            cover: 'img/denmark.jpg',
            name: 'Danmark'
        },
        {
            cover: 'img/iceland.jpg',
            name: 'Iceland',
        },
        {
            cover: 'img/finland.jpg',
            name: 'Finland'
        },
        {
            cover: 'img/estonia.jpg',
            name: 'Estonia'
        }
    ];
}]);

literally I want {{ land.cover }} change on hover to {{ land.cover1 }} — AlexNikolaev94
– AlexNikolaev94, Commented Jan 27, 2016 at 11:19
is it not working for you? maybe add a plnkr to your question — Nitsan Baleli
– Nitsan Baleli, Commented Jan 27, 2016 at 11:23
where u have written any code to change ur image from cover to cover1? — vamshi krishna kurella
– vamshi krishna kurella, Commented Jan 27, 2016 at 11:29

dfsq · Accepted Answer · 2016-01-27 11:30:54Z

4

You can't use interpolation tags in the expression context. Should be:

<div ng-controller="mainController" class="main">
    <div ng-repeat="land in lands" class="col-md-9" 
         ng-init="coverImage = land.cover" 
         ng-mouseover="coverImage = land.cover"
         ng-mouseout="coverImage = land.cover1"
         ng-style="{ 'background-image': 'url(' + coverImage + ')' }">
        <p>{{ land.name }}</p>
    </div>
</div>

edited Jan 27, 2016 at 11:30

answered Jan 27, 2016 at 11:23

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

AlexNikolaev94 Over a year ago

I've fixed tags but still don't know how to make background image change. I suppose I should use ng-mouseenter and ng-mouseleave, but have no idea how to use them properly in this situation :(

dfsq Over a year ago

Check my answer, it has all the answers to your situation, ngMouseover and ngMouseout.

jrharshath Over a year ago

upvoted for simplicity - the ng-init approach never occurred to me :)

AlexNikolaev94 Over a year ago

@dfsq thanks a lot! that really simplified everything!

jrharshath · Accepted Answer · 2016-01-27 11:51:18Z

2

Since you're trying to respond to the DOM, the angular way of doing this would be to create a directive.

Working code is available here. The summary of the solution is this:

Your DOM will change to this:

<div ng-controller="MainController as ctrl">
    <div ng-repeat="land in ctrl.lands" hover-bg-change default-bg="land.cover" hover-bg="land.cover1" class='tile'>
        <p>{{ land.name }}</p>
    </div>
</div>

The directive will look like this:

app.directive('hoverBgChange', ['$parse', function ($parse)
{
    return {
        restrict: 'A',
        link: function (scope, $el, attrs)
        {
            var defaultBg = $parse(attrs.defaultBg)(scope);
            var hoverBg = $parse(attrs.hoverBg)(scope);

            $el.css('background-image', 'url('+defaultBg+')');

            $el.on('mouseover', function ()
            {
                $el.css('background-image', 'url('+hoverBg+')');
            })
            .on('mouseout', function ()
            {
                $el.css('background-image', 'url('+defaultBg+')');
            });
        }
    }
}])

answered Jan 27, 2016 at 11:51

jrharshath

26.7k34 gold badges99 silver badges128 bronze badges

3 Comments

jrharshath Over a year ago

@dfsq's solution is a much simpler solution. If changing bg image is all you need, you'd be better off with that solution :)

AlexNikolaev94 Over a year ago

yes, but I tried his variant and it didn't work :( but your variant does exactly what I need

jrharshath Over a year ago

I tried that approach, and it works as well. Updated the plunker to show that approach. I recommend you go with that approach - less code is more maintainable code :)

urpalreloaded · Accepted Answer · 2016-01-27 11:29:53Z

1

You can't make it work in one go. My solution would be define css as

.hover-out{
background-image: url('img/norway.jpg');
}

.hover-in{
background-image: url('img/norway1.jpg');
}

In markup

<div ng-controller="mainController" class="main">
    <div ng-repeat="land in lands" class="col-md-9" ng-class="{'hover-out':hoverOut[$index], 'hover-in':!hoverOut[$index]}" ng-mouseover="hoverOut[$index] = false" ng-mouseleave="hoverOut[$index] = true">
        <p>{{ land.name }}</p>
    </div>
</div>

answered Jan 27, 2016 at 11:29

urpalreloaded

5063 silver badges13 bronze badges

1 Comment

AlexNikolaev94 Over a year ago

urpalreloaded unfortunately it doesn't work :( i made it as you've shown, but now the <div>'s have totally dissapeared

Collectives™ on Stack Overflow

Change background image on hover with AngularJS

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related