Angular get value of dynamically generated html elements

Question

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?

Try .html() (or .innerHTML) instead of .val()

Ilan Kleiman
– Ilan Kleiman

2017-12-07 17:40:57 +00:00
Commented Dec 7, 2017 at 17:40 — Ilan Kleiman
– Ilan Kleiman, Commented Dec 7, 2017 at 17:40

charlietfl · Accepted Answer · 2017-12-07 17:43:30Z

1

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);
}

answered Dec 7, 2017 at 17:43

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

charlietfl Over a year ago

if you find yourself trying to use DOM methods in controllers you are doing something wrong and there is most likely a better angular approach

Collectives™ on Stack Overflow

Angular get value of dynamically generated html elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related