ng-click funktioniert nicht, versucht, ein Bild bei Klick zu ersetzen

Ich bin neu von Angular JS, Nun, ich versuche, ein Bild auf Klick zu ersetzen. Ein Klick auf Img1 würde das vorherige Bild durch Img1 ersetzen und so weiter.ng-click funktioniert nicht, versucht, ein Bild bei Klick zu ersetzen

Um dies zu erreichen, benutze ich ng-click. Die Sache ist, dass sogar die Bildnamen aus der Datenbank abgerufen werden. So

, wenn ich dies tun, ist es nicht

<img class="img-responsive" src="images/products/{{oneItem.Image3}}" ng-click="current='{{oneItem.Image3}}'" />

Während Werke Werk wenn ich this-

<img class="img-responsive" src="images/products/{{oneItem.Image3}}" ng-click="current='test3.jpg'" />

tun Und ich versuche, es zu ersetzen hier-

<div class="trueimagger"> 
     <img ng-src="WebDrop/images/products/{{ current }}" /> 
</div>

Kann mir jemand helfen, indem er zeigt, wo ich es vermassle.

Bitte informieren Sie sich, wenn zusätzliche Informationen benötigt werden. :)

Quelle

2016-08-21 theLearner

ngClick erwartet ein Ausdruck:

ng-click="current = oneItem.Image3"

Sie auch direkt ngSrc Direktive statt src-Attribut verwenden soll:

<img class="img-responsive" 
    ng-src="images/products/{{oneItem.Image3}}" 
    ng-click="current = oneItem.Image3" />

Quelle

2016-08-21 11:39:24 dfsq

Es funktioniert ... Brilliant..Who thought..Thanks vielen Kumpel haben würde :) :) :) meinen Tag .. :) :) – theLearner

Nein Problem, froh, dass es nützlich war. – dfsq

Ich würde es auf dem Controller direkt ändern, so können Sie Ihre formatieren URL ohne Logik auf die Ansicht zu setzen

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <script> 
     var app = angular.module('yourApp', []) 
     app.controller('FooCtrl', function($scope) { 
     $scope.imgSrc = 'http://www.freedigitalphotos.net/images/img/homepage/87357.jpg'; 
     $scope.changeSrc = function() { 
      $scope.imgSrc = 'http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg'; 
     } 
     }); 

    </script> 
    </head> 
    <body ng-app="yourApp"> 
     <div ng-controller="FooCtrl"> 
     <div class="trueimagger"> 
      <img ng-src="{{ imgSrc }}" /> 
     </div> 
     <button ng-click="changeSrc()">ChangeImgSrc</button> 
     </div> 
    </body> 
</html>

Hier ist ein plunker mit dieser Idee

Quelle

2016-08-21 11:53:14

Das ist eine gute Idee, aber hier versuche ich eine Kategorieseite einer Shopping-Site zu erstellen [link] (https://s13.postimg.org/w4gb7jcef/snap.png). Das kann mir nicht viel helfen. :). Danke, dass du mich darüber informiert hast :) – theLearner

Sie müssen nicht geschweifte geschweifte Klammern {{..}} in ng-click schreiben.

Stattdessen einfach schreiben:

<img class="img-responsive" 
    src="images/products/{{oneItem.Image3}}" 
    ng-click="current='oneItem.Image3'" />

Quelle

2016-08-21 12:19:27

ng-click funktioniert nicht, versucht, ein Bild bei Klick zu ersetzen

Antwort

Verwandte Themen