CODEWITHSUNDEEP
javascriptangularjs
qwd412
qwd412

Reputation: 17

Angular .then() is not working ( is not refreshing view after sending get request)

Creating internet shop, and when i manage user cart page Angular is not refreshing view after calling deleteFromCart(), so i need to refresh page. What am I missing ? As I did promise with .then(f()) but it is not working JS code : 

    var url = $location.absUrl() + "/products";

getProducts();
function getProducts() {
    $http.get(url).then(function (response) {
        $scope.total = 0;
        $scope.products = response.data;
        $scope.products.forEach(function (product) {
            $scope.total = $scope.total + product.price;
        })
    });
}

$scope.deleteFromCart = function (productId) {
    $http.get(url + '/' + productId).then(function () {
        getProducts();
    });
}

View : 

<div class="panel panel-primary" ng-controller="CartCtrl">
    <div class="panel-heading">
        <h3 class="panel-title">Your Cart</h3>
    </div>
    <div class="panel-body ">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>Product name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th class="text-center">Action</th>
            </tr>
            </thead>
            <tr ng-repeat="product in products">
                <td>{{product.title}}</td>
                <td>{{product.price}}$</td>
                <td>3</td>
                <td class="text-center">
                    <a href="#" ng-click="deleteFromCart(product.id)" class="btn btn-danger btn-xs">Remove</a>
                </td>
            </tr>



        </table>
       <h4><span class="label label-primary pull-left">TOTAL : {{total}}$</span></h4>
        <button class="btn btn-success pull-right">Confirm Order</button>
    </div>

</div>

Upvotes: 0

Views: 62

Answers (1)

Ghazanfar Khan
Ghazanfar Khan

Reputation: 3718

Why do you want to refresh the page just remove that product from the list

 <td class="text-center">
    <a href="#" ng-click="deleteFromCart(product.id,$index)" class="btn btn-danger btn-xs">Remove</a>
  </td>

$scope.deleteFromCart = function (productId,index) {
    $http.get(url + '/' + productId).then(function () {
         $scope.products.splice(index,1);
    });
}

Upvotes: 1

Related Questions