CODEWITHSUNDEEP
angularjs
Komal K.
Komal K.

Reputation: 480

changes in scope not affecting in html

var product_id = $this.attr('data-id');
angular.forEach($rootScope.cartItems, function(value, key) {
if (value.iProductID == product_id && key > -1){
    $rootScope.cartItems.splice(key, 1);
    console.log($rootScope.cartItems);
}

Here in above code, I'm removing object element from the array but after removing element using splice the console.log() displays the correct data results. But in my HTML $rootScope.cartItems still displays the removed element.

Upvotes: 1

Views: 52

Answers (2)

Komal K.
Komal K.

Reputation: 480

$rootScope.cartItems.splice(key, 1);
                    $scope.$apply(function() {
                        $rootScope.cartItems = $rootScope.cartItems;
                    });

I found the answer. Thank you guys for your answers.

Upvotes: 1

Sajal
Sajal

Reputation: 4401

Probably some block of code in controller refills the cart items and hence the change is not visible.

You could set up an event to listen to remove an item from the cart.

var product_id = $this.attr('data-id');
$rootScope.$broadcast('RemoveCartItem', product_id);

Listen for changed event as:

$rootScope.$on('RemoveCartItem', function (event, product_Id) {
    angular.forEach($rootScope.cartItems, function(value, key) {
    if (value.iProductID == product_Id && key > -1){
        $rootScope.cartItems.splice(key, 1);
        console.log($rootScope.cartItems);
    }
});

Upvotes: 0

Related Questions