Home Angular get value of dynamically generated html elements
Reply: 1

Angular get value of dynamically generated html elements

saim2025
1#
saim2025 Published in 2017-12-07 17:34:21Z

I am generating html div elements dynamically to render a JSON response. I want get values of elements inside those div elements using angularjs but cant seem to do that. Here is my code:

HTML:

<div class="col-sm-4" ng-repeat="product in products">
  <div class="product-image-wrapper">
    <div class="single-products">
      <div class="productinfo text-center">
        <!-- <img src="images/home/product1.jpg" alt="" /> -->
        <img data-ng-src="data:image/png;base64,{{product.prod_icon_base64}}" alt="" />
        <h2 class="price" id="p">{{product.prod_price}}</h2>
        <p>{{product.prod_name}}</p>
        <a ng-click="getPrice()" value="{{product.prod_price}}" class=" btn btn-default add-to-cart "><i class="fa fa-shopping-cart "></i>Add to cart</a>
      </div>
      <div class="product-overlay ">
        <div class="overlay-content ">
          <h2 class="price " id="p ">{{product.prod_price}}</h2>

          <p>{{product.prod_name}}</p>
          <a ng-click="getPrice() " class="btn btn-default add-to-cart " value="{{product.prod_price}} "><i class="fa fa-shopping-cart "></i>Add to cart</a>
        </div>
      </div>
    </div>

  </div>
</div>
</div>

JS:

$scope.getPrice=function(){
    var price=document.getElementsByClassName(".price").val()
    alert(price.data)
}

But this is not working. How can i fix this?

charlietfl
2#
charlietfl Reply to 2017-12-07 17:43:30Z

Approach is all wrong and you are trying to use a jQuery method on a collection of elements.

An <a> tag also has no value property

Pass the product object into the ng-click function.

<a ng-click="getPrice(product)" class=" btn btn-default add-to-cart ">
    <i class="fa fa-shopping-cart "></i>Add to cart
</a>

JS

$scope.getPrice=function(product){
    console.log(product.prod_price);
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.364718 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO