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