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

Question

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

首先，我想说我在 Angularjs 上真的很挣扎，但我决心学习它。我是一名设计师，而不是砖匠(请原谅《星际迷航》中的引用资料)。

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

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

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

应用程序/ Controller :

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

Answer 1

尝试在 Controller 中创建函数并从 ng-click 执行它

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