Как обновлять / редактировать данные в базе данных с помощью AngularJS

Работая над веб-приложением, я просто добавил приведенный ниже код обновления, и он не работает. Сводка всего приведенного ниже кода:

  • Нажмите кнопку с именем update
  • Он выводит FORM, который должен содержать значения продукта с щелчком / текущим.
  • Теперь, когда я нажимаю save в этой форме, он должен обновлять базу данных, но это не так.
  • Я использую $_GET в файле PHP (update.php), чтобы получить текущий ID продукта. Затем получить все данные этого продукта через этот ID .

PS: В консоли нет ошибок.

КОД ОБНОВЛЕНИЯ:

 <?php include "includes/connection.php"; switch($_GET['action']) { case 'update_entry' : $data = json_decode(file_get_contents("php://input")); $index = $data->id; $productname = $data->pname; $company = $data->company; $price = $data->price; $quantity = $data->quantity; if(isset($productname) && !empty($productname) && isset($company) && !empty($company) && isset($price) && !empty($price) && isset($quantity) && !empty($quantity)){ $query = "UPDATE `product` SET `id`='$index',`name`='$productname',`company`='$company',`price`='$price',`quantity`='$quantity' WHERE id= $index"; if(mysqli_query($con, $query)) { return true; } else { echo "Error: " . $sql . "<br />" . mysqli_error($con); } break; } } ?> 

Контроллер :

 myApp.controller("updateCtrl",['$scope','$http','$routeParams','$location',function($scope,$http,$routeParams,$location){ $scope.update = function(){ var currentId = $routeParams.id; $http.post("update.php?action=update_entry",{'id':currentId}) .then(function(data){ $location.path('/viewproduct'); }); } }]); 

HTML:

 <form style="padding:10px" ng-controller="updateCtrl"> <div class="form-group"> <label for="ProductName">Product Name</label> <input type="text" class="form-control" placeholder="{{product.name}}" ng-model="productname" required> </div> <div class="form-group"> <label for="company">Company </label> <input type="text" class="form-control" placeholder="{{product.company}}" ng-model="company" required> </div> <div class="form-group"> <label for="company">Price </label> <input type="text" class="form-control" placeholder="{{product.price}}" ng-model="price" required> </div> <div class="form-group"> <label for="company">Quantity </label> <input type="text" class="form-control" placeholder="{{product.quantity}}" ng-model="quantity" required> </div> <button type="submit" class="btn btn-default" ng-click="update()">Save updated data</button> <a href="#/viewproduct" class="btn btn-danger">Cancel</a> <h1 ng-if="successMessage == 0">Great Data is Updated!</h1> </form> 

Кнопка обновления:

 <td ng-controller="updateCtrl"><a class="btn btn-primary" href="#/updateproduct/action={{product.id}}" >Update</a></td> 

Сделайте так, как показано ниже

ваша часть просмотра

 <form style="padding:10px" ng-controller="updateCtrl"> <div class="form-group"> <label for="ProductName">Product Name</label> <input type="text" class="form-control" placeholder="{{product.name}}" ng-model="productname" required> </div> <div class="form-group"> <label for="company">Company </label> <input type="text" class="form-control" placeholder="{{product.company}}" ng-model="company" required> </div> <div class="form-group"> <label for="company">Price </label> <input type="text" class="form-control" placeholder="{{product.price}}" ng-model="price" required> </div> <div class="form-group"> <label for="company">Quantity </label> <input type="text" class="form-control" placeholder="{{product.quantity}}" ng-model="quantity" required> </div> <button type="submit" class="btn btn-default" ng-click="update()">Save updated data</button> <a href="#/viewproduct" class="btn btn-danger">Cancel</a> <h1 ng-if="successMessage == 0">Great Data is Updated!</h1> </form> <td><a class="btn btn-primary" ng-click="addProductData();" >Update</a></td> 

Внутри вашего контроллера выполните следующие действия:

 $scope.addProductData=function(){ var updatedata=$.param({'action':'update','productname':$scope.productname,'company':$scope.company,'price':$scope.price,'quantity':$scope.quantity,'id':currentId}); $http({ method:'POST', url:'update.php', data:updatedata, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(function successCallback(response){ alert(response.data['msg']); },function errorCallback(response) { alert(response.data['msg']); }); } 

ваш файл update.php должен понравиться ниже.

 <?php include "includes/connection.php"; $result=array(); if(isset($_REQUEST["action"]) && $_REQUEST["action"] !=""){ if($_REQUEST["action"]=="update"){ $productname = $_POST['productname']; $company = $_POST['company']; $price = $_POST['price']; $quantity = $_POST['quantity']; $id=$_POST['id']; $query = "UPDATE `product` SET `name`='$productname',`company`='$company',`price`='$price',`quantity`='$quantity' WHERE id= $id"; if(mysqli_query($con, $query)) { $result['msg']="updated successfully"; }else{ header("HTTP/1.0 401 Unauthorized"); $result['msg']="unable to updated"; } echo json_encode($result); } } ?> 

Я думаю, что вы можете использовать базовую идею. Теперь вы можете реализовать на своем пути.

Попробуйте использовать ng-model="{{product.name}}}" а не placeholder в HTML. И в вашем контроллере пройдите эту модель:

 $http.post("update.php?action=update_entry",$scope.product) 

Затем вы должны получить некоторые данные на своем PHP.

Вы проверили только ваш php, чтобы убедиться, что вы можете получать и обновлять данные с помощью php без углового? Я бы использовал пост, поскольку он более дружелюбен для извлечения и обновления данных.

Я также хотел бы отделить ваш вызов до конечной точки php в службу (фабрика). Я бы также просто передал весь объект обратно, чтобы убедиться, что вы ничего не пропустили, если у вас нет беспокойства о пропускной способности.

Сначала я хотел бы сначала выполнить тестирование php. Затем раздельная логика в угловом. Затем b отлаживается, чтобы узнать, что передается из представления.

Я думаю, вы должны это проверить: https://github.com/eliarms/CustomerManagerApp
Это простое приложение для управления клиентами, использующее Angularjs и PHP. Цель приложения – выделить множество различных функций, предлагаемых AngularJS, и продемонстрировать, как их можно использовать вместе.