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

Question

我正在使用Ionic Framework和Cordova Sqlite构建一个移动应用程序。我正在离子列表中显示来自sqlite数据库的数据。每个离子列表项都有一个按钮，用于从数据库中删除相应的项。单击按钮，数据将从数据库中删除，但它将继续显示在离子列表中，直到我返回到其他视图并返回到它。我需要立即刷新视图，并从列表中删除该项。而且，我所有的SQL代码都在控制器中，所以我似乎还需要重新加载控制器。

应用程序。js公司

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

控制器。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.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传递给$范围。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.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);
    });
}