*我更新了 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>
最佳答案
尝试在 Controller 中创建函数并从 ng-click 执行它
$scope.changeImg = function (c) {
$scope.current=c;
}
关于javascript - 如何使用 ng-click 更改另一个 img 上的 ng-src?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33849228/