show product detail when clicking

Question

show product detail when clicking

Navigation

#1 by (0 votes)

1

Good evening friends, I'm doing a shopping cart on ionic and I want to show the detail of each product in a modal at the moment of clicking on its image.

This is the code that shows me all the products

  <div ng-repeat="p in producto  |filter:buscador" ng-model="checked">
  <a href="#/detalle?idp={{ p.id }}">
    <div  class="contenedorP text-center" ng-init="checked=0" style="width: 33.3333333333%; float: left;">

      <img src="{{p.picture}}" class="itemProducto"  width="100" height="110" alt="">
      <p class=" pullDown  precio">{{ p.name }} </p>  
      <p class=" pullDown  precio">{{ p.price |  currency: "$" : 0 }} </p>               
    </div>
  </a>
</div>

I want to make a method that when clicking on it, show me a modal with the detail of that product and show me the option to add or not to the cart

angularjs ionic

asked by frd 02.09.2016 в 04:50

source

1 answer

Error "No matching unique or primary key for this column-list" with a compound station Put server (Win 2012 Server R2) to a domain as a member server

score 0 · Accepted Answer

You just have to invoke the $ionicModal service from the controller. That's not something you can do from the view so you have to use a method and ng-click

<div ng-repeat="p in producto  |filter:buscador" ng-model="checked">
  <a ng-click="showDetails(p)">
    <div  class="contenedorP text-center" ng-init="checked=0" style="width: 33.3333333333%; float: left;">

      <img src="{{p.picture}}" class="itemProducto"  width="100" height="110" alt="">
      <p class=" pullDown  precio">{{ p.name }} </p>  
      <p class=" pullDown  precio">{{ p.price |  currency: "$" : 0 }} </p>               
    </div>
  </a>
</div>

You have to create an HTML or a template for the modal with the necessary data to show the details (here I only put what you have as an example)

modal-details.html

<img src="{{current.picture}}" class="itemProducto"  width="100" height="110" alt="">
<p class="pullDown  precio">{{ current.name }} </p>  
<p class="pullDown  precio">{{ current.price |  currency: "$" : 0 }} </p>

and in the controller

$scope.showDetails = function(product) {
    $scope.current = product;

    $ionicModal.fromTemplateUrl('modal-details.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function(modal) {
        $scope.modal = modal;
    });
}

The trick is to use a property of the $scope to signal which is the current selected product, I used current , you can use the one you want since the modal requires that you pass a $scope of reference for your content, usually the controller itself is used.