为 ng-repeat 分配唯一值 ID

Question

OBJECTIVE

我希望扩展 CodeSchool 的 "Shaping up with Angular" 教程。我的目标是让用户单击重新呈现当前产品图像的缩略图。产品图片保存在一个 JSON 文件中 - 每个产品都有一个包含多个图片的数组。

演示版

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

product.js

app.directive("productGallery", function() {
  return {
    restrict: "E",
    templateUrl: "product-gallery.html",
    controller: function() {
      this.current = 0;
      this.setCurrent = function(imageNumber){
        this.current = imageNumber || 0;
      };
    },
    controllerAs: "gallery"
  };
});

产品-gallery.html

<div ng-show="product.images.length">
  <div class="img-wrap">
    <img ng-src="{{product.images[gallery.current]}}" />
  </div>
  <ul class="img-thumbnails clearfix">
    <li class="small-image pull-left thumbnail" ng-repeat="image in product.images">
      <img ng-click="gallery.setCurrent({{$index}})" ng-src="{{image}}"/>
    </li>
  </ul>
</div>

问题/问题

我可以通过使用 $index 并检查它们在数组中的位置来为每个图像分配一个值。我想将此值设置为等于 "imageNumber"，根据 product.js 将更改当前的主图像。

如何将 $index 传递给 imageNumber？
我的思考过程和对问题的评价是否正确？

注释

我是一名编程新手，对于任何明显的错误深表歉意 - 不胜感激！

Answer 1

您的 ng-click 不应使用 {{}} 插值指令。

<img ng-click="gallery.setCurrent($index)" ng-src="{{image}}"/>

ng-click directive required Expression to evaluate upon click. (Event object is available as $event) but interpolation is not allowed it, because you have access to the scope by directly mentioning its name.

Working Plunkr

Answer 2

将 gallery.setCurrent({{$index}}) 更改为 gallery.setCurrent($index)。像 ng-click 这样的指令期望获得 javascript 代码，但您使用的是 angular 模板分隔符 '{{' '}}'

为 ng-repeat 分配唯一值 ID

Assigning unique value ID to ng-repeat

javascript

angularjs

ng-repeat