動的に生成されたhtml要素の角度取得値

Question

私はJSON応答をレンダリングするためにhtml div要素を動的に生成しています。私はangularjsを使用してこれらのdiv要素内の要素の値を取得したいが、それを行うことはできません。ここに私のコードは次のとおりです。

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

しかし、これは動作しません。どうすればこの問題を解決できますか？

Answer 1

アプローチが間違っていて、要素のコレクションに対してjQueryメソッドを使用しようとしています。

<a>タグはない値プロパティ

はng-click関数にproductオブジェクトを渡していません。

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