0

Actually, I got a list of products and I would like to pass the current product id when click on the ng-href thanks to a function with ng-click in the ng-href.

Here is my html file : 

<div class="agile_top_brands_grids" ng-model="products" ng-repeat="product in products">
  <div class="col-md-4 top_brand_left">
    <div class="hover14 column">
      <div class="agile_top_brand_left_grid">
        <div class="agile_top_brand_left_grid_pos">
          <img src="../../resources/images/offer.png" alt=" "
            class="img-responsive" />
        </div>
        <div class="agile_top_brand_left_grid1">
          <figure>
            <div class="snipcart-item block">
              <div class="snipcart-thumb">
                <a ng-href="/#/singleproduct"
                  ng-click="currentProductId(product.id)">
                  <img src="../../resources/images/hh4.png">
                </a>
                <p>{{product.name}}</p>
                <h4>{{product.price}}</h4>
              </div>
            </div>
          </figure>
        </div>
      </div>
    </div>
  </div>

And I tried to get the id in my controller like this :

$scope.currentProductId = function (productId) {
  console.log("Hello");
  console.log(productId)
}

But the $scope.currentProductID is not executed at all ..

Any idea please ?

rrd
  • 5,789
  • 3
  • 28
  • 36
Cupkek05
  • 458
  • 1
  • 6
  • 22
  • 1
    I think you should not use ng-model in your div. – Naimad Sep 28 '17 at 08:02
  • @Naimad, I must create a new div with every product in the list – Cupkek05 Sep 28 '17 at 08:05
  • Although you create a new div at each turn, you do not need to use ng-model. Also, in your ng-model you are using the variable that refers to your collection, not the individual product. – Naimad Sep 28 '17 at 08:11

1 Answers1

0

Hello there is some confusion like

<div class="agile_top_brands_grids" ng-model="products" ng-repeat="product in products">
                    <div class="col-md-4 top_brand_left">
                        <div class="hover14 column">
                            <div class="agile_top_brand_left_grid">
                                <div class="agile_top_brand_left_grid_pos">
                                    <img src="../../resources/images/offer.png" alt=" " class="img-responsive" />
                                </div>
                                <div class="agile_top_brand_left_grid1">
                                    <figure>
                                        <div class="snipcart-item block" >
                                            <div class="snipcart-thumb" >
                                                <a ng-href="/#/singleproduct" ng-click="currentProductId(product.id)"><img src="../../resources/images/hh4.png"></a>
                                                <p>{{product.name}}</p>
                                                <h4>{{product.price}}</h4>
                                            </div>
                                        </div>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
  • On first line why you are using ng-model?
  • If you are using ng-href="/#/singleproduct" then it will change your route and controller. Thats mean your function "$scope.currentProductId" will not execute.

  • Solution 1 is: Either you can pass id in href like

    ng-href="/#/singleproduct"+product.id and remove ng-click function

  • Solution 2 is: ng-href="#" and use ng-click function for change route.

yasir_mughal
  • 112
  • 10