Question

我是Angular JS的新手，我正试图在点击时替换图像。即，单击Img1我将用Img1替换上一个图像，依此类推。

要实现这一点，请使用ng-click。甚至是从DB中检索图像名称。

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

<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

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

相反，只需写下：

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

Answer 3

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

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

ng-click无法正常工作，尝试在点击时替换图像

3 个答案: