代码之家 › 专栏 › 技术社区 › Harish Kumar

angular js:单击products list build内数量增加和减少按钮的事件,ng repeat反映每个列表数量编号

product-quantity parent-child angularjs-ng-repeat angularjs

Harish Kumar · 技术社区 · 6 年前

我对产品列表数量按钮有问题。我是angular js的新手,正在尝试建立产品列表,其中包含数量增加和减少按钮。我用ng repeat构建了这个列表,对于增加和减少按钮,我调用了一个函数qty\u incr()和qty\u decr(),它可以工作,但会反映在每个列表项上。我只想反映相同的产品。jquery也可以这样做

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

$(此)。父项(“.cart\u product”)。子项(“#incr\u decr\u no”)。文本(parseInt($(this))。父项(“.cart\u product”)。子项(“#incr\u decr\u 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;
    }

}

})

1 回复 | 直到 6 年前

Harish Kumar 6 年前

我通过修改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;
    }

}

})