Question

我想显示直接销售总额而不用角度js重新加载

当我在处理购物车时仍然使用重新加载

JS

    .controller('CartCtrl',function($scope,$http,$ionicPopup,$timeout,$location){

        $scope.plusCart = function() {
            $http({
                method  : 'POST',
                url     : 'http://192.168.1.33/so-ku/www/server/menu/plus_cart',
                headers : { 'Content-Type' : 'application/json' },
                data    : JSON.stringify({ rowid: $scope.currentItem.rowid, qty : $scope.currentItem.qty })
            }).success(function(data) {
                console.log(data);
                total_cart();
                location.reload(true);
            });
        }
  function total_cart() {
        $http.get('http://192.168.1.33/so-ku/www/server/menu/total_cart').
        then(function(response){
            $scope.total = response.data.records;
        });
    }

HTML

<div ng-controller="CartCtrl">
<div ng-repeat="x in total" style="padding-top: 10px;" ng-init="total_cart()">
Rp {{x.total}}
</div>
</div>

我想在提交帖子

时自动计算结果div与总数

Answer 1

如果您的total_cart()功能有效，那么只需删除location.reload(true)行，就可以刷新数据。

Answer 2

要链接两个$ http操作，首先要确保后续函数从$ http调用中返回promise：

function total_cart_promise() {
    var url = 'http://192.168.1.33/so-ku/www/server/menu/total_cart';
    //save promise
    var promise = $http.get(url)
      .then(function(response){
        $scope.total = response.data.records;
    });
    //return promise for chaining
    return promise;
};

然后在第一个函数中，使用.then方法并返回对第一个XHR成功处理程序的后续承诺：

$scope.plusCart = function() {
    $http({
        method  : 'POST',
        url     : 'http://192.168.1.33/so-ku/www/server/menu/plus_cart',
        //headers : { 'Content-Type' : 'application/json' },
        //data    : JSON.stringify({ rowid: $scope.currentItem.rowid, qty : $scope.currentItem.qty })
        data    : { rowid: $scope.currentItem.rowid, 
                    qty : $scope.currentItem.qty }
    //}).success(function(data) {
    //USE .then method
    }).then(function successHandler(response) {
        console.log(response.data);
        //total_cart();
        //return promise to chain subsequent XHR
        return total_cart_promise();
        //location.reload(true);
    });
}

通过链接到后续的XHR GET方法，无需重新加载页面。

因为调用promise的.then方法会返回一个新的派生promise，所以很容易创建一个promise链。可以创建任何长度的链，并且由于可以使用另一个承诺（将进一步推迟其解析）来解决承诺，因此可以在链中的任何点暂停/推迟承诺的解析。这样就可以实现功能强大的API。 - AngularJS $q Service API Reference - Chaining Promises

另请注意，无需对数据进行字符串化，AngularJS框架默认使用Content-Type: application/json，框架自动执行JSON.stringify。

提交数据Angular JS后刷新<div>

2 个答案: