如何通过ng-click更改另一个img上的ng-src

How do I change a ng-src on another img with ng-click?

本文关键字：img 上的 ng-src 另一个 何通过 ng-click      更新时间：2023-09-26

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

首先，让我说我真的很难理解Angularjs，但我决心学习它。我是一个设计师，而不是一个砌砖工（请原谅《星际迷航》中的参考）。

我正在构建一个原型，点击左边的小缩略图会在右边加载一个更大的版本。我在图像上使用ng点击来传递唯一的"当前"ID。点击不会影响大图像ng src。我尝试了各种各样的排列，但没有发现我做错了什么。

*新信息：我正在使用ng repeat来遍历图像列表。我试图通过点击来传递每个图片的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 wth缩略图和大图像：

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

尝试在控制器中创建函数并通过点击执行

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

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

它现在正在工作。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>
相关文章：