在 Ionic 框架中重新加载视图和控制器

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);
            })


    }
}])

remove() 在按钮点击时被调用。

更新代码：

.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>

更新：

关于您的 cmets 中的问题，我将使用数组 $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。

更新：

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);
    });
}