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

插入评估的 angular 表达式的字符串文字

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

注意通过 +

进行的字符串连接

这是plnkr

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

Expression in ng-init not working with ng-repeat

javascript

angularjs

angularjs-directive

angularjs-ng-repeat

angularjs-ng-init