CODEWITHSUNDEEP
javascriptangularjs
GeekOnGadgets
GeekOnGadgets

Reputation: 959

view not updating in Angular

Problem Question,

I have a delete method on my cart, so when I press on delete button it delete the item of it. But my view is not getting update whereas item is getting successfully deleted.

//Cart controller

(function() {
    var cartController = function($scope,cartService,NotificationService) {

        getCart();
        function getCart() {
            cartService.getCart()
                .success(function (cart) {
                    if (cart != null || cart != 'undefined') {
                        $scope.cartData = cart;
                        console.log(cart)
                    }
                })
                .error(function (status, data) {
                    console.log(status);
                    console.log(data);
                })
        };


        $scope.deleteItem = function (productID) {
            cartService.deleteCartItem(productID)
                .success(function () {
                    NotificationService.add("success", "Item deleted from the cart", 3000);
                    getCart();
                })
                .error(function (status, data) {
                    console.log(status);
                    console.log(data);
                })
        }

        cartController.$inject = ['$scope', 'cartService', 'NotificationService'];
        angular.module('cartApp').controller('cartController', cartController);

    }

}());

//my view

   <div class="mainContainer" ng-controller="cartController">
     <tr ng-repeat="cart in cartData.carts" >
           <td>
                <button ng-click="deleteItem(cart.id)" class="btn btn-primary">Delete</button>
           </td>
    </tr>
  </div>

Please guide me what I am doing wrong.

Upvotes: 0

Views: 87

Answers (4)

jgladch
jgladch

Reputation: 116

Add a $scope.$apply() to the end of your call. This will run the angular digest loop and update your view.

Upvotes: 1

Jesse Carter
Jesse Carter

Reputation: 21147

When working with $scope in angular you will run into this issue when you overwrite an object on $scope (as opposed to modifying properties of that object). As previously mentioned $scope.$apply() will force Angular to reevaluate all your bindings and should cause your UI to update. That being said, making a call to your API to get the entire contents of the cart following a delete operation seems very inefficient here. You either want to send back an empty 200 OK and use that as a trigger to know that it is safe to remove the item client side using splice. The other option would be to send the new cart contents as the body of your 200 OK following a successful delete and at least save yourself an extra round trip.

Upvotes: 1

Hichem ben chaabene
Hichem ben chaabene

Reputation: 145

Update the $scope.cartData array removing the deleted one on the success method

$scope.cartData.splice($scope.cartData.indexOf(productID), 1 );

Upvotes: 0

Jake Lin
Jake Lin

Reputation: 11494

Add $scope.$apply(); after the ajax call. 

$scope.cartData = cart;
console.log(cart);
$scope.$apply();

Upvotes: 1

Related Questions