Angularjs 单击ng repeat thumb后在模式中以角度显示产品信息

我刚刚开始学习英语！我的产品缩略图列表上有一个“快速查看”按钮，该按钮和图像是使用angular ng repeat生成的。单击“快速查看”时，我需要以模式显示适当的产品说明/价格等（来自我的json文件），但无法显示任何内容。我想可能使用产品代码过滤产品，因为这对每个项目都是唯一的。任何帮助都将不胜感激

我的html：

  <div ng-repeat="product in store.products">
    <div class="item col-md-3 col-xs-12">
        <div class="product-image-wrapper text-center">
            <div class="product">
                <div class="image">  
                    <div class="quickview">
                        <a title="Quick View" class="btn btn-xs  btn-quickview" data-target="#product-details-modal" data-toggle="modal" ng-click="selectedProduct = product"> Quick View </a>
                    </div><!--quickview-->
                    <a href="#"><product-image></product-image></a>
                </div><!--image-->
                <p><span class="red"><product-title></product-title></span><br>
                </p>
            </div><!--product-->
        </div><!--product-image-wrapper text-center-->
    </div><!--item col-md-3 col-xs-12-->
</div><!--ng repeat-->

JSON

---

在您的

ng repeat

中设置所选产品的分配实际上是在计算机上创建

selectedProduct

。因此，模态标记可能无法访问它。可以通过将选定产品指定给对象特性来避免此问题：

ng单击=“store.selected=product”

我还注意到，您在指令定义中为产品定义了变量，但没有传入产品。这应该通过html中的属性完成：

---

这是一个有效的演示：

非常感谢您的帮助。我一直在使用上面的代码，但是我想知道如何通过我的JSON文件输入我的数据，我以前使用过下面的代码，但现在似乎无法插入它$http.get（'store-products.json'）.success（函数（数据）{store.products=data；}）@wickedwicca，我想你的问题是

store.products

应该是

$scope.store.products

。我已经更新了plunkr以演示如何从JSON文件读取产品。再次感谢您的帮助。这件事我还在埋头苦干。我的最后一个问题是如何显示我的产品库。基本上，只有当我使用ng repeat时，图像才会显示，然后它会显示所有的产品库。如何仅显示选定的库？我的代码为：。我又迷路了，尝试了画廊/图片上的各种商店。选择无效。谢谢xHi@wickedwicca，我建议您接受我的答案（通过点击复选标记），因为原始问题已经解决。然后，为所选库问题打开一个新问题。另外，如果你创建一个plunker来演示这个问题，我相信你会在一个小时内得到答案。好的，对不起-在这里发布内容是全新的，所以不确定礼仪…干杯就可以了

(function() {
  var app = angular.module('store-products', []);

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

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

  app.directive('productTitle', function (){
    return {
      restrict:'E',
      templateUrl: 'includes/product-title.html'
      scope: {
        product: '=',
      },
    };
  });

  app.directive("productDescriptions", function() {
    return {
      restrict: 'E',
      templateUrl: "includes/product-description.html"
      scope: {
        product: '=',
      },
    };
  });

})();

[
  {
    "name": "Up in Flames",
    "description": "Covered in dragon scales, this rashguard has a full graphical back showing the flame surrounded dragon itself.",
    "price": 24.99,
    "code": "FLAME",
    "images": [
      "images/products/flames/front.jpg",
      "images/products/flames/back.jpg",
      "images/products/flames/close.jpg"
    ],
    "reviews": []
  },
]