Javascript 如何使用ng click在另一个img上更改ng src？

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

首先，让我说我真的在与Angularjs斗争，但我决心学习它。我是一个设计师，不是一个砖块层（请原谅星际迷航参考）

我正在构建一个原型，点击左边的一个小缩略图，会在右边加载一个更大的版本。我使用ng单击图像来传递唯一的“当前”ID。单击不会影响大图像ng src。我尝试了各种排列方式，不知道我可能做错了什么

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

应用程序/控制器：

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

var-app=angular.module（'pageApp'，[]）；
应用控制器（'imgCtrl'，功能（$scope）{
$scope.current='7078/7250439172_72562c8e45_k'；
});

带有缩略图和大图像的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>

{{current}}

尝试在控制器中创建函数并从ng单击执行它

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

---

尝试在控制器中创建函数并从ng单击执行它

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

---

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

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

---

演示：

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

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

演示：

它现在正在工作。 您使用的是angular 2，它与angular 1（1.4）有很多不同之处

var-app=angular.module（'pageApp'，[]）；
应用控制器（'imgCtrl'，功能（$scope）{
$scope.current='7078/7250439172_72562c8e45_k'；
});

它现在正在工作。 您使用的是angular 2，它与angular 1（1.4）有很多不同之处

var-app=angular.module（'pageApp'，[]）；
应用控制器（'imgCtrl'，功能（$scope）{
$scope.current='7078/7250439172_72562c8e45_k'；
});

在您的装备中包括Angular 2.0。我不会从这个开始，因为它仍然是alpha，与你所说的角度完全不同。尽管刚刚开始，你还是应该阅读这篇文章（第2条指的是你的案例）和john papas风格指南，我没有注意到我在plunkr中包含了Angular 2.0。但是我的本地主机代码使用的是v1.3.16。我在plunkr上创建了一个简化版本，并且对它也不起作用感到满意。我的本地主机代码可能太复杂，无法在plunkr上发布，但问题似乎不是更新到1.4.8后的版本。您解决了问题吗？如果没有，请检查您的AngularJS是否可以添加

{{1+1}}

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

{{1+1}}

。不，问题尚未解决。很抱歉，我有一个红鲱鱼角的版本。我认为这与范围有关。我不了解范围，也不知道如何确定范围内或范围外的内容。我已确定在左侧面板中{current}的计算结果正确，我可以在浏览器检查器中看到它。然而，在右面板的下方，它在检查器中显示为“{current}”。我将尝试在plunkr中展示涉及ng repeat的更复杂代码，并更新这个问题。顺便说一句，{{1+1}}有效。