javascript - ng-init 中的表达式不适用于 ng-repeat

Question

所以我试图让许多带有背景图像的 div 并在我将鼠标悬停在任何特定 div 上时禁用背景图像。

<div id="interest" class="col-md-4 col-sm-6" ng-repeat="interest in vm.interestList"
     ng-init="myStyle={'background-image': 'url(interest.src)'}"
     ng-style="myStyle" ng-mouseenter="myStyle={}"
     ng-mouseleave="myStyle={'background-image': 'url(interest.src)'}">
    <button id="interestButton" class="btn btn-default btn-lg" >{{interest.interestName}}</button>
</div>

由于某种原因，ng-init 中的 myStyle 永远不会获得 interest.src 中的实际值，而只是获得“interest.src”。我也试过 {{interest.src}} 但这不起作用。

任何帮助表示赞赏！

Answer 1

试试这样

<div id="interest" class="col-md-4 col-sm-6" ng-repeat="interest in vm.interestList"
   ng-style="{'background-image': 'url('+interest.src+')'}" ng-mouseenter="{}"
   ng-mouseleave="{'background-image': 'url('+interest.src+')'}">
  <button id="interestButton" class="btn btn-default btn-lg" >{{interest.interestName}}</button>
</div>

Answer 2

试试这个

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  
  $scope.interestList = [{interestName:"One", src:"img/one.png"}];
  $scope.url = function(url){
    return 'url('+url+')';
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">

  <div id="interest" class="col-md-4 col-sm-6" ng-repeat="interest in interestList"
     ng-init="myStyle = {'background-image': url(interest.src)}"
     ng-style="myStyle" ng-mouseenter="myStyle={}"
     ng-mouseleave="myStyle={'background-image': url(interest.src)}">
    <button id="interestButton" class="btn btn-default btn-lg" >{{interest.interestName}}</button>
  </div>
</div>

Answer 3

您将不得不插入评估的角度表达式的字符串文字interest.src

而不是将 ng-init="myStyle={'background-image': 'url(interest.src)'}"其更改为ng-init="myStyle={'background-image': 'url(' + interest.src + ')'}"

注意字符串连接通过+

这是plnkr