Question

我正在动态生成html div元素以呈现JSON响应。我希望使用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>标记也没有值属性

将product对象传递到ng-click函数。

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

Angular获取动态生成的html元素的值

1 个答案: