CODEWITHSUNDEEP
javascriptangularjs
iPatz
iPatz

Reputation: 47

AngularJS : size of list in javascript not update


I’m using SweetAlert as message notification in AngularJS application. The problem is that when I remove row of table (number of product in cart) in Bootstrap modal and click to close Bootstrap modal. I wonder about the number of row on screen (products in cart) is not update immediately.

enter image description here


when press trash button in the most right of row, SweetAlert dialog will display and then click confirm to delete row.

enter image description here
It need to click other link for instance click "About us" link.
enter image description here
After click, the number of product in cart will updated.

enter image description here

This is snippet code in angularjs controller when delete product in cart.

    $scope.DeleteCartProduct = function (Row, ROLine, index) {
   //   console.log("DeleteCartProduct .." + index + " ROLine " + ROLine + " Row " + Row);
        swal({
          title: "Are you sure?",
          text: "คุณต้องการลบรายการสินค้า " + ROLine.ProductNameTh + " !",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Yes, delete it!",
          cancelButtonText: "No, cancel please!",
          closeOnConfirm: true,
          closeOnCancel: true
        },
        function(isConfirm){
          if (isConfirm) {
            $('#CartRow'+index).remove();
            $scope.ROHead.ROLineList.splice(index, 1);
            $scope.ROLineList.splice(index, 1);
            if ($scope.ROHead.ROLineList.length <= 0 || $scope.ROHead.ROLineList === undefined) {
              $('#HideCartTable').show('slow');
              $('#ShowCartTable').hide('slow');
            } else if ($scope.ROHead.ROLineList.length > 0) {
              $('#HideCartTable').hide('slow');
              $('#ShowCartTable').show('slow');
            }
            $scope.UpdateCartSummary();
          } else {
          }
        });
    }


Any ideas, THANKS

Upvotes: 1

Views: 68

Answers (1)

steppefox
steppefox

Reputation: 1844

First of all, mixing jQuery and AngularJS in Controller is bad idea. You should wrap your jQuery elements (sliders, dropdown, etc.) with directives. Anyway, to make this code works, you should know, how to use $scope.$apply.

When you want run angular code in jQuery plugins callbacks, you must do it in wrapper $scope.$apply. Your code should looks like that:

$scope.DeleteCartProduct = function (Row, ROLine, index) {
//   console.log("DeleteCartProduct .." + index + " ROLine " + ROLine + " Row " + Row);
    swal({
      title: "Are you sure?",
      text: "คุณต้องการลบรายการสินค้า " + ROLine.ProductNameTh + " !",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes, delete it!",
      cancelButtonText: "No, cancel please!",
      closeOnConfirm: true,
      closeOnCancel: true
    },
    function(isConfirm){
      $scope.$apply(function(){
        if (isConfirm) {
          $('#CartRow'+index).remove();
          $scope.ROHead.ROLineList.splice(index, 1);
          $scope.ROLineList.splice(index, 1);
          if ($scope.ROHead.ROLineList.length <= 0 || $scope.ROHead.ROLineList === undefined) {
            $('#HideCartTable').show('slow');
            $('#ShowCartTable').hide('slow');
          } else if ($scope.ROHead.ROLineList.length > 0) {
            $('#HideCartTable').hide('slow');
            $('#ShowCartTable').show('slow');
          }
          $scope.UpdateCartSummary();
        } else {

        }
      });
    });
}

But don't run another $apply in $apply function, it will crash your script.

Upvotes: 2

Related Questions