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>

<强>更新

关于评论中的问题，我会使用数组$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);
    });
}

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

1 个答案: