ng-click 不起作用，试图在点击时替换图像

Question

我是 Angular JS 的新手，好吧，我正在尝试在点击时替换图片。即，单击 Img1 我将用 Img1 替换之前的图像，依此类推。

为此，我使用了 ng-click。问题是甚至正在从数据库中检索图像名称。

所以当我这样做时，它不起作用-

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

而当我这样做时有效-

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

我正在尝试替换它-

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

谁能指出我搞砸的地方来帮助我。

如果需要任何其他信息，请告诉我。 :)

Answer 1

ngClick 需要一个表达式：

ng-click="current = oneItem.Image3"

您还应该使用 ngSrc 指令而不是直接使用 src 属性：

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

Answer 2

我会直接在控制器上更改它，这样您就可以格式化您的 url 而无需将逻辑放在视图上

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angularjs@1.5.8" 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>

这里有一个plunker有这个想法

Answer 3

你不必在 ng-click 中写双花括号 {{..}}。

相反，只需写：

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

ng-click 不起作用，试图在点击时替换图像

ng-click not working, trying to replace an image on click

javascript

jquery

angularjs

angularjs-ng-click