如何使用 ng-click 更改另一个 img 上的 ng-src？答案

【问题标题】：How do I change a ng-src on another img with ng-click?如何使用 ng-click 更改另一个 img 上的 ng-src？
【发布时间】：2015-11-21 22:16:45
【问题描述】：

*我更新了 plunkr 和代码以更好地代表我的本地主机版本。尽管修复了以前的 plunkr，但 Angularjs 版本不是问题。 *

首先，让我说我对 Angularjs 很苦恼，但我决心学习它。我是设计师，而不是砌砖工（请原谅星际迷航参考）。

我正在构建一个原型，单击左侧的小缩略图会在右侧加载较大的版本。我在图像上使用 ng-click 来传递唯一的“当前”ID。点击不影响大图 ng-src。我尝试了各种排列，但看不出我做错了什么。

*新信息：我正在使用 ng-repeat 来遍历图像列表。我尝试通过 ng-click 传递每个图像 url，但这似乎是它丢失的地方。 *

http://plnkr.co/edit/vYiykI7dfMKd34ZmS13N?p=preview

应用程序/控制器：

    <script>
    var app = angular.module('pageApp', []);
      app.controller('imgCtrl', function($scope) {
        $scope.current = '7078/7250439172_72562c8e45_k';
    });
    </script>

带有缩略图和大图的html：

    <div class="container">
  <div class="row" ng-app="pageApp" ng-controller="imgCtrl">
    <div class="col-xs-3">
      <ul class="list-group sm-img">
        <li class="list-group-item text-center" ng-repeat="n in ['7078/7250439172_72562c8e45_k', '7087/7250440014_a32980508e_k', '7225/7250440766_8db45aa277_h']">
          <img class="img-responsive" src="https://farm8.staticflickr.com/{{n}}.jpg" ng-click="current='{{n}}'" /><span>{{current}}</span>
        </li>
      </ul>
    </div>
    <div class="col-xs-9">
      <img class="img-responsive" ng-src="https://farm8.staticflickr.com/{{ current }}.jpg" />
    </div>
  </div>
</div>

【问题讨论】：

在您的 plunkr 中包含 Angular 2.0。不会从那开始，因为它仍然是 alpha 并且与您正在谈论的角度完全不同。尽管刚刚开始，您应该阅读这篇文章（第 2 条是指您的案例）toptal.com/angular-js/… 和 john papas 风格指南 github.com/johnpapa/angular-styleguide
我没有注意到我在 plunkr 中包含了 Angular 2.0。但是我的本地主机代码使用的是 v1.3.16。我在 plunkr 上创建了一个简化版本，并且对它也无法正常工作感到满意。我的 localhost 代码可能太复杂，无法在 plunkr 上发布，但即使更新到 1.4.8，问题似乎也不是版本。
您的问题解决了吗？如果没有，请检查您的 AngularJS 是否可以添加 {{1+1}}。
不，问题还没有解决。很抱歉有那个红鲱鱼 Angular 版本。我认为这与范围有关。我不了解范围或如何确定范围内或范围外的内容。
我已经确定在左侧面板中 {{ current }} 评估正确，我可以在浏览器检查器中看到它。但是，在右侧面板的下方，它在检查器中显示为“{{current}}”。我将尝试在 plunkr 中显示涉及 ng-repeat 的更复杂的代码并更新此问题。顺便说一句，{{1+1}} 有效。

标签： javascript angularjs

【解决方案1】：

尝试在控制器中创建函数并通过 ng-click 执行它

$scope.changeImg = function (c) {
    $scope.current=c;
}

【讨论】：

【解决方案2】：

您的问题很有趣：您正在加载 Angular2 版本，但是使用 Angular1.x 语法和代码。加载正确的库版本，例如 1.4.8，一切都会开始正常工作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

演示：http://plnkr.co/edit/0efkCT9wwEaWfK0nR6su?p=info

【讨论】：

【解决方案3】：

它现在正在工作。 http://plnkr.co/edit/nmqDqcmtyTq479wZWsuR?p=preview 您使用的角度 2 与角度 1 (1.4) 有很大的不同

<!DOCTYPE html>
<html ng-app="pageApp">

 <head>
 <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
   <script>
          var app = angular.module('pageApp', []);
      app.controller('imgCtrl', function($scope) {
        $scope.current = '7078/7250439172_72562c8e45_k';
    });
    </script>
  </head>

 <body>
<div class="container">

  <div class="row"  ng-controller="imgCtrl">
    <div class="col-xs-3">
      <img class="img-responsive" src="https://farm8.staticflickr.com/7078/7250439172_72562c8e45_k.jpg" ng-click="current='7078/7250439172_72562c8e45_k'" />
      <img class="img-responsive" src="https://farm8.staticflickr.com/7087/7250440014_a32980508e_k.jpg"  ng-click="current='7087/7250440014_a32980508e_k'" />
      <img class="img-responsive" src="https://farm8.staticflickr.com/7225/7250440766_8db45aa277_h.jpg" ng-click="current='7225/7250440766_8db45aa277_h'"/>
    </div>
    <div class="col-xs-9">
      <img class="img-responsive" ng-src="https://farm8.staticflickr.com/{{ current }}.jpg" />
    </div>
  </div>
  </div>

  </body>
</html>

【讨论】：