javascript - 使用 AngularJS 在悬停时更改背景图像

Question

我有一个带有背景图片的 的范围，但我不知道如何改变它们。我尝试了几种变体，但都没有通过。这是代码:

<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'
        }
    ];
}]);

Answer 1

您不能在表达式上下文中使用插值标记。应该是:

<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>