Angular display product info in modal after clicking an ng-repeat thumb

Question

I have just started learning angular! I have a 'quick view' button on my list of product thumbnail images, the button and images are generated using angular ng-repeat. I need to display the appropriate product description/price etc (from my json file) in a modal when clicking on 'quick view' but can't get anything to show. I was wanting to possibly filter the products using their product code, as this is unique to each item. Any help would be much appreciated.

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

× JS

(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: '=',
      },
    };
  });

})();

JSON

[
  {
    "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": []
  },
]

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

The assignment that sets the selected product, inside your ng-repeat, actually creates the selectedProduct on a child scope. So it is likely inaccessible to your modal markup. You can avoid this by assigning the selected product to an object property:

ng-click="store.selected = product"

I also noticed that you defined isolated scope variables for the product in your directive definition, but you didn't pass the product in. That should be done with attributes in your html:

<product-image product="product"></product-image>

Here is a working demo: http://plnkr.co/edit/WKLnEaE7uU85r1CXIWlg?p=preview

edited May 23 '17 at 11:50

Community

1
1

answered Mar 15 '15 at 16:26

j.wittwer

9,497
3
30
32

Thanks very much for your help. I have been using the above, but was wondering how I would have my data feed in through my JSON file, I was using the below previously, but cant seem to slot it in now? $http.get('store-products.json').success(function(data){ store.products = data; }); – wickedwicca Mar 22 '15 at 07:32
@wickedwicca, I think your problem was that `store.products` should be `$scope.store.products`. I have updated the plunkr to demonstrate reading products from a JSON file. – j.wittwer Mar 23 '15 at 17:01
Thanks again for your help. I am still plodding away at this. My final problem is getting my product gallery to display. Basically the images only display when I use an ng-repeat, which then displays all the product galleries. How do you display only the selected gallery? I have with my code being:

. I am lost again and have tried various store.selected on the gallery/images to no avail. thanks x – wickedwicca Mar 29 '15 at 11:14
Hi @wickedwicca, let me suggest that you accept my answer (by clicking the checkmark), since the original question has been addressed. Then, open a new question for the selected gallery issue. In addition, if you create a plunker demonstrating the problem, I am certain you will get an answer within an hour. – j.wittwer Mar 29 '15 at 15:06
ok sorry - totally new to posting stuff in here so not sure of the etiquette… cheers will do – wickedwicca Mar 30 '15 at 09:26
No problem! I think I understand what you were asking, now that I have read it in the new question. Thanks for creating the demo on plunker. – j.wittwer Mar 30 '15 at 16:25

Angular display product info in modal after clicking an ng-repeat thumb

1 Answers1