[英]Expression in ng-init not working with ng-repeat
因此,当我将鼠标悬停在任何特定的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}},但这不起作用。
任何帮助表示赞赏!
这样尝试
<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>
尝试这个
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>
您将需要对所评估的角度表达式的字符串文字进行内插,以获取interest.src
代替ng-init="myStyle={'background-image': 'url(interest.src)'}"
将其更改为ng-init="myStyle={'background-image': 'url(' + interest.src + ')'}"
注意通过+
字符串字符串
这是plnkr
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.