Ausdruck in ng-init funktioniert nicht mit ng-repeat

Also ich versuche, viele divs mit Hintergrundbildern zu haben und deaktivieren Sie das Hintergrundbild, wenn ich über ein bestimmtes div schweben.Ausdruck in ng-init funktioniert nicht mit ng-repeat

<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>

Aus irgendeinem Grund die myStyle in ng-init nie eher den tatsächlichen Wert in interest.src bekommt bekommt gerade 'interest.src'. Ich habe auch versucht {{interest.src}}, aber das funktioniert nicht.

Jede Hilfe wird geschätzt !!

Quelle

2016-05-18 Nischay Venkatram

Ich bin nicht sicher, das ist, was für ng-init ist, aber irgendwie kann man verlieren, dass und Wenn Sie die Maus ein-/ausblenden, legen Sie den Stil so fest, dass er das Hintergrundbild enthält, und verwenden Sie dann CSS: Hover, um das Hintergrundbild zu entfernen, während sich das Element über dem Hintergrund befindet. Der Style funktioniert nicht, da sich interest.src innerhalb eines String-Wertes für background-image befindet, es ist nur ein String, der nicht an die Variable gebunden ist. – mgiesa

Ich habe versucht, die: Hover-Ansatz, aber die CSS-Eigenschaft war nicht in der Lage, die ng-Stil zu überschreiben und das Hintergrundbild blieb. Also dachte ich, dass der ng-Stil vielleicht eine höhere Priorität hat. –

Versuchen Sie, diese

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>

Quelle

2016-05-18 04:34:04 byteC0de

Danke, es funktioniert! –

versuchen, wie diese

<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>

Quelle

2016-05-18 04:20:02

Sie das Stringliteral Ihrer ausgewertet Winkel Ausdrücke für interest.src

In haben zu interpolieren anstelle von ng-init="myStyle={'background-image': 'url(interest.src)'}" Änderung es ng-init="myStyle={'background-image': 'url(' + interest.src + ')'}"

Beachten Sie die Zeichenfolge concantenation über +

Hier ist die plnkr

Quelle

2016-05-18 04:56:50 CozyAzure

Vielen Dank !!! –

Ausdruck in ng-init funktioniert nicht mit ng-repeat

Antwort

Verwandte Themen