ng-init中的表达式无法与ng-repeat一起使用

Question

So I am trying to have many divs with background images and disable the background image when I hover over any particular 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>

For some reason the myStyle in ng-init never gets the actual value in interest.src rather just gets 'interest.src'. I also tried {{interest.src}} but that does not work.

Any help is appreciated!!

Answer 1

try like this

<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

Try this

 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

You will have to interpolate the string literal of your evaluated angular expressions for interest.src

Instead of ng-init="myStyle={'background-image': 'url(interest.src)'}" change it to ng-init="myStyle={'background-image': 'url(' + interest.src + ')'}"

Note the string concantenation via +

Here is the plnkr