Question

我希望在将新记录插入数据库时获得记录的实时更新。插入新记录时，我希望包含item in cart的div刷新

.controller('newitem_ctrl', ['$scope', '$http', function($scope, $http) {

    $http.get('http://localhost/spree/work/items/item.php').success(function(data) {
        $scope.cart = data;
    });

    $scope.newitem = function() {
        $ionicLoading.show({
            template: '<p>Wait...</p><ion-spinner></ion-spinner>'
        });
        event.preventDefault();
        $http.post("http://localhost/work/scripts/new_payment.php", {
                'item': $scope.item
            })
            .success(function(data, status, headers, config) {
                console.log(data)
            }).error(function(error) {
                console.error(error);
            });
    };
}]);

HTML

<div ng-controller="newitem_ctrl">
    <form method="post">
        <input type="text" name="item_name" placeholder="Item Name" ng-model="item" />
        <button class="button button-balanced" ng-click="newitem()">Add</button>
    </form>
    <div ng-repeat="item in cart">
        {{item.product_name}}
    </div>
</div>

Answer 1

你可以这样做。通过邮寄调用获得成功回复后，在购物车数组中添加商品。

.controller('newitem_ctrl', ['$scope', '$http', function ($scope, $http) {
        $http.get('http://localhost/spree/work/items/item.php').success(function(data){
                    $scope.cart=data;
                   });

                $scope.newitem=function() {
                $ionicLoading.show({template: '<p>Wait...</p><ion-spinner></ion-spinner>'});
                event.preventDefault();
                    $scope.newItem = {'item':$scope.item}
                    $http.post("http://localhost/work/scripts/new_payment.php",
                    $scope.newItem)
                    .success(function(data,status,headers,config){
                         console.log(data);
                         $scope.model = {product_name: $scope.newItem};
                         $scope.cart.push($scope.model);
                    }).error(function(error){
                         console.error(error);
                    });
                    }

            }])

它将更新div，因为绑定数组已更改

Answer 2

试试这个

$http({
    method: 'POST',
    url: 'http://localhost/work/scripts/new_payment.php',
    data: { 'item': $scope.item }
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
    $scope.cart.push($scope.item);
}, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

无关：.success和.error回调已过时。使用.then

Answer 3

因为你没有使用socket.io或类似的东西
你问的是：

将新记录插入db
时更新记录

我只能决定不断请求php脚本并获取新数据
我已经添加了您的代码。
所以你可以复制粘贴它：

.controller('newitem_ctrl', ['$scope', '$http', function ($scope, $http) {

  function getCart(currentScope) {
    $http
      .get('http://localhost/spree/work/items/item.php')
      .then(function(data) { // success
        currentScope.cart = data;
      })
      .catch(function(err) { // error
        console.log(err);
      })
      .finally(function() { // always
        // to not throttle browser and server with requests will wait for http request end 
        // and recall getCart again
        setTimeout(function() {
          getCart(currentScope);
        }, 5000); // 5 sec
      });
  }
  getCart($scope);

  $scope.newitem = function() {
    $ionicLoading
      .show({template: '<p>Wait...</p><ion-spinner></ion-spinner>'});

    event.preventDefault();
    $http
      .post("http://localhost/work/scripts/new_payment.php", {'item': $scope.item})
      .then(function(data, status, headers, config) { // success
        console.log(data);
      })
      .catch(function(error) { // error
        console.error(error);
      })
      .finally(function() { // always
        getCart($scope);
        $ionicLoading.hide();
      });
  };
}]);

插入新数据时会实时刷新angularjs

3 个答案: