在離子框架中重新加載視圖和控制器

Question

我正在構建一個使用Ionic Framework和Cordova Sqlite的移動應用程序。我正在離子列表中顯示來自sqlite數據庫的數據。每個離子列表項目都有一個按鈕來從數據庫中刪除相應的項目。點擊按鈕後，數據將從數據庫中刪除，但它會繼續顯示在離子列表中，直到我回到其他視圖並回到它。我需要立即刷新視圖，並從列表中刪除該項目。此外，我所有的SQL代碼都在控制器中，所以我似乎也需要重新加載控制器。

app.js

.state('app.cart', { 
    url: '/cart', 
    views: { 
     'menuContent': { 
     cache: false, 
     templateUrl: 'templates/cart.html', 
     controller: 'NFController' 
     } 
    } 
    }) 

controller.js

.controller('NFController', ['$scope', '$cordovaSQLite','$cordovaToast','$state','$stateParams', function($scope, $cordovaSQLite, $cordovaToast, $state,$stateParams) { 


     $scope.listItems= []; 
     $cordovaSQLite.execute(db, 'SELECT * FROM cart ORDER BY id DESC') 
      .then(
       function(res) { 

        $scope.cartTotal=0; 
        $scope.crtPP=0; 
        if (res.rows.length > 0) { 
         for (var i=0; i<res.rows.length; i++) { 
         **$scope.crtPP=res.rows.item(i).productPrice*res.rows.item(i).productQuantity; 
        $scope.cartTotal=$scope.cartTotal+$scope.crtPP; 
        $scope.CProductName=res.rows.item(i).productName; 
         $scope.listItems.push(res.rows.item(i));** 
         } 
        } 
        else{ 
          $scope.status = "No Products in the Cart"; 
        } 
       }, 
       function(error) { 
        $scope.statusMessage = "Error on loading: " + error.message; 
       } 
      ); 


    $scope.remove = function(id) { 

      $cordovaSQLite.execute(db, 'DELETE from cart WHERE id=?', [id]) 
      .then(function(res) { 

        //$state.go($state.current, {}, {reload: true}); 
        var current = $state.current; 
        var params = angular.copy($stateParams); 
        $state.transitionTo(current, params, { reload: true, inherit: true, notify: true }); 
        $cordovaToast.show('Removed from Cart','short','bottom'); 

      }, function(error) { 
        console.log(error.message); 
      }) 


    } 
}]) 

刪除（）被調用按鈕的點擊。

更新的代碼：

.controller('NFController', ['$scope', '$cordovaSQLite','$cordovaToast', function($scope, $cordovaSQLite, $cordovaToast) { 


     $scope.listItems= []; 
     $cordovaSQLite.execute(db, 'SELECT * FROM cart ORDER BY id DESC') 
      .then(
       function(res) { 

        $scope.cartTotal=0; 
        $scope.crtPP=0; 
        if (res.rows.length > 0) { 
         for (var i=0; i<res.rows.length; i++) { 
         $scope.listItems.push(res.rows.item(i)); 
         } 

         cartTotal(); //cartTotal() called initially when the controller loads 
         console.log("Cart Total : " + $scope.cartTotal); 
        } 
        else{ 

          console.log("####console######## NO results found #######"+"Table record #: "); 
        } 
       }, 
       function(error) { 

       } 
      ); 

    $scope.remove = function(id) { 

      $cordovaSQLite.execute(db, 'DELETE from cart WHERE id=?', [id]) 
      .then(function(res) { 

        var index=$scope.listItems.indexOf(id) 
        $scope.listItems.splice(index,1); 
        cartTotal(); //CartTotal() called second time 
        $cordovaToast.show('Removed from Cart','short','bottom'); 

      }, function(error) { 
        console.log(error.message); 
      }) 
      console.log(id); 

    } 

    function cartTotal() 
    { 
     angular.forEach($scope.listItems, function(item, key) { 
      $scope.crtPP = item.productPrice * item.productQuantity; 
      $scope.cartTotal += $scope.crtPP; 
      console.log($scope.cartTotal); 
     }); 
    } 
}]) 

Answer 1

當你執行你的

$scope.remove = function(id) { 
    ... 
} 

的刪除你不需要的觀點的重新加載。您可以輕鬆地刪除這一切：

var current = $state.current; 
var params = angular.copy($stateParams); 
$state.transitionTo(current, params, { reload: true, inherit: true, notify: true }); 

你的項目$scope.listItems= [];的數組應該被綁定到視圖，以便您只需從數組中刪除的項目或重新加載它，您的視圖將自動更新。

$scope.remove = function(id) { 
      $cordovaSQLite.execute(db, 'DELETE from cart WHERE id=?', [id]) 
      .then(function(res) { 
        $scope.listItems = <find the id in the list and remove it>; 
        $cordovaToast.show('Removed from Cart','short','bottom'); 

      }, function(error) { 
        console.log(error.message); 
      }) 
    } 

而不是傳遞的ID只到$ scope.remove方法，你可以通過整個項目，並用它來尋找數組中的元素，以便它可以被刪除：

$scope.remove = function(item) { 
     $cordovaSQLite.execute(db, 'DELETE from cart WHERE id=?', [item.id]) 
    .then(function(res) { 
     var index = $scope.listItems.indexOf(item); 
     $scope.listItems.splice(index, 1); 
     $cordovaToast.show('Removed from Cart','short','bottom'); 

    }, function(error) { 
      console.log(error.message); 
    }) 
} 

和你的HTML：

<a class="btn" ng-click="remove(item)">Delete</a> 

UPDATE：

關於您在評論中的問題，我會使用數組$scope.listItems來計算總數。

我想你已經在你的範圍內定義的屬性：

$scope.cartTotal = 0; 

我想補充一個函數：

function calculateCartTotal() 
{ 
    angular.forEach($scope.listItems, function(item, key) { 
     $scope.cartTotal += item.amount; 
    }); 
} 

PS：item.amount或任何你的價值。

和拼接後重新計算：

$scope.remove = function(item) { 
     $cordovaSQLite.execute(db, 'DELETE from cart WHERE id=?', [item.id]) 
    .then(function(res) { 
     var index = $scope.listItems.indexOf(item); 
     $scope.listItems.splice(index, 1); 

     calculateCartTotal(); 

     $cordovaToast.show('Removed from Cart','short','bottom'); 

    }, function(error) { 
      console.log(error.message); 
    }) 
} 

如果你不能做到這一點，因爲你沒有一個值item.amount（或類似），您可以隨時在功能重新執行查詢和飼料$scope.cartTotal。

UPDATE：

function cartTotal() 
{ 
    $scope.cartTotal = 0; 

    angular.forEach($scope.listItems, function(item, key) { 
     $scope.crtPP = item.productPrice * item.productQuantity; 
     $scope.cartTotal += $scope.crtPP; 
     console.log($scope.cartTotal); 
    }); 
}