Question

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

首先，让我说我真的在与Angularjs斗争，但我决心要学习它。我是设计师，而不是砖层（原谅Star Trek参考）。

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

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

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

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

尝试在控制器中创建功能并从ng-click

执行

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

Answer 2

你的问题很有趣：你使用Angular1.x语法和代码加载Angular2版本。加载正确的库版本，例如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

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

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

3 个答案: