2

そのため、背景画像を含む多くの 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}} も試しましたが、うまくいきません。

どんな助けでも大歓迎です!!

4

3 に答える 3

0

これを試して

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>

于 2016-05-18T04:34:04.733 に答える
0

評価された角度式の文字列リテラルを補間する必要がありますinterest.src

ng-init="myStyle={'background-image': 'url(interest.src)'}"に変更する代わり にng-init="myStyle={'background-image': 'url(' + interest.src + ')'}"

文字列の連結に注意してください+

ここにplnkrがあります

于 2016-05-18T04:56:50.757 に答える