동적으로 생성 된 html 요소의 각도 get 값

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