angular js：产品列表中数量增加和减少按钮的点击事件构建，其中 ng-repeat 反映每个列表数量

Question

我对产品列表数量按钮有疑问。我是 angular js 的新手，正在尝试构建具有数量增加和减少按钮的产品列表。我已经用 ng-repeat 构建了列表，对于增加和减少按钮，我调用了一个函数 qty_incr() 和 qty_decr() 它可以工作但反映在每个列表项上。我只想反映相同的产品。与 jquery 相同的事情可以这样完成

$('.qty_incr').click(function(){

$(this).parents('.cart_product').children('#incr_decr_no').text(parseInt($(this).parents('.cart_product').children('#incr_decr_no').text() + 1));

})

想知道如何用 angularjs 实现，这是我的代码

<p ng-show="loading" class="loading"><img src="assets/img/Spinner-1s-200px.gif" width="50" /></p>
<div class="cart_products" ng-hide="loading" ng-repeat="product in data.products">
<div class="cart_product">
    <div class="cart_pro_img"><img src="{{product.product_image}}" /></div>
    <div class="cart_pro_detail">
        <div class="cart_pro_title">{{product.product_name}}</div>
        <div class="cart_pro_price">₹ {{product.price}}</div>
        <div class="cart_pro_incr_decr">

                <i class="fa fa-minus-circle" ng-click="qty_decr($parent.item)" style="color:#FF4646"></i>    
                <span id="incr_decr_no" ng-init="$parent.item.quantity=1">{{item.quantity}}</span>
                <i class="fa fa-plus-circle" ng-click="qty_incr()" style="color:#68C549"></i>  
                <i class="fa fa-times-circle-o" {{item.product_id}}></i>   
        </div>
    </div>
</div>

JS

app.controller("cart", function($scope, $http){     
var guestid = localStorage.getItem('guestid');
$scope.loading = true;
$http.get(baseurl+"webservice.php?req=cartproducts&guestid="+guestid)
.then(function(response){
    $scope.loading = false;
    $scope.data = response.data;
    //console.log($scope.data);
    //$rootScope.cartcount(guestid); 
});
$scope.qty_incr = function(item){
    $scope.item.quantity = $scope.item.quantity + 1;
}
$scope.qty_decr = function(item){
    if($scope.item.quantity > 1){
        $scope.item.quantity = $scope.item.quantity - 1;
    }

}

})

Answer 1

我已经通过修改html和js代码解决了

我的HTML

<div class="cart_products" ng-hide="loading" ng-repeat="product in data.products">
<div class="cart_product">
    <div class="cart_pro_img"><img src="{{product.product_image}}" /></div>
    <div class="cart_pro_detail">
        <div class="cart_pro_title">{{product.product_name}}</div>
        <div class="cart_pro_price">₹ {{product.price}}</div>
        <div class="cart_pro_incr_decr">

                <i class="fa fa-minus-circle" ng-click="qty_decr(item)" style="color:#FF4646"></i>    
                <span id="incr_decr_no" ng-init="item.quantity=1">{{item.quantity}}</span>
                <i class="fa fa-plus-circle" ng-click="qty_incr(item)" style="color:#68C549"></i>  
                <i class="fa fa-times-circle-o" ng-click="removefromcart(product.product_id)"></i>   
        </div>
    </div>
</div>

而 JS 是：

app.controller("cart", function($scope,$rootScope, $http){     
var guestid = localStorage.getItem('guestid');

$http.get(baseurl+"webservice.php?req=cartproducts&guestid="+guestid)
    .then(function(response){
        $scope.data = response.data;
        console.log($scope.data);

    })


$scope.qty_incr = function(item){
    item.quantity = item.quantity + 1;
}
$scope.qty_decr = function(item){
    if(item.quantity > 1){
       item.quantity = item.quantity - 1;
    }

}

})

angular js：产品列表中数量增加和减少按钮的点击事件构建，其中 ng-repeat 反映每个列表数量

angular js :click event for quantity increase and decrease button inside products list build with ng-repeat reflecting each list quantity number

parent-child

angularjs

angularjs-ng-repeat

product-quantity