angularjs - 在 Ionic 框架中重新加载 View 和 Controller

Question

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

应用程序.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) { 
  ...
}

您不需要重新加载 View 。您可以轻松删除所有这些:

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

你的项目数组 $scope.listItems= [];应该绑定(bind)到 View ，因此您只需从数组中删除项目或重新加载它，您的 View 将自动更新。

   $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或者你的值(value)是什么。

并在拼接后重新计算:

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

如果你不能这样做，因为你没有值(value) 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);
    });
}