how to update the data using angularjs+php?

Question

I need to update the data from MySQL DB using AngularJS + PHP.

Dashboard.html is my first page I just give only two field: name and position, and I fetch the data from DB using ng-repeat after fetch the code the user will click the edit button it will redirect to the edit.html page with the same fields: name and position. Help me to fetch that name and position data in edit.html page

Dashboard.html

<div ng-app="myapp" ng-controller="usercontroller">
  <table>
    <th>Name</th>
    <th>Position</th>
    <tbody>
      <tr ng-repeat="x in names">
        <td>{{x.name}}</td>
        <td>{{x.position}}</td>
        <td>
          <a href="edit.html"><span class="glyphicon glyphicon-edit" ng-click="updateData(x.name, x.position)" ></span></a>
        </td </tr>
    </tbody>
  </table>
</div>
<script type="text/javascript">
  var app = angular.module("myapp", []);
  app.controller("usercontroller", function($scope, $http) {
    $scope.updateData = function(name, position) {
      $scope.name = name;
      $scope.position = position;
      $scope.btnName = "Update";
    }
  });
</script>

This is my edit.html page and am using ng-model to bind the data from dashboard.html, but it is not binding. And I click the update button the data have to update with id, and I mentioned my PHP file also.

My DB name sample and table named demo.

Edit.html

<div ng-app="myapp" ng-controller="EditController">
  <form name="form">
    <div class="form-group">
      <label for="name">Name</label>
      <input class="form-control" type="text" name="name" ng-model="name" /> {{name}}
    </div>
    <div class="form-group">
      <label for="position">Position</label>
      <input class="form-control" type="text" name="position" ng-model="position" />
    </div>
    <input type="submit" name="btnUpdate" class="btn btn-success" ng-click="update_data()" value="{{btnName}}">
  </form>
  <script>
    var app = angular.module("myapp", []);
    app.controller("EditController", function($scope, $http) {
      $scope.btnName = "Update";
      $scope.update_data = function() {
        $http.post(
          "edit.php", {
            'name': $scope.name,
            'position': $scope.position,
            'btnName': $scope.btnName
          }
        ).success(function(data) {
          alert(data);
          $scope.name = null;
          $scope.position = null;
          $scope.btnName = "Update";
        });
      }
    });
  </script>

Edit.php

  <?php
    $connect = mysqli_connect("localhost", "root", "", "sample");
    $data    = json_decode(file_get_contents("php://input"));
        if (count($data) > 0) {
        $name     = mysqli_real_escape_string($connect, $data->name);
        $position = mysqli_real_escape_string($connect, $data->position);
        $btn_name = $data->btnName;
            if ($btn_name == 'Update') {
            $id    = $data->id;
            $query = "UPDATE demo SET name = '$name',position = '$position' WHERE id = '$id'";
                if (mysqli_query($connect, $query)) {
                echo 'Updated Successfully...';
                } else {
                echo 'Failed';
                }
            }
        }
    ?>

score 0 · Accepted Answer · answered Sep 06 '18 at 11:17

You have two different controllers: usercontroller and EditController. Once you leave one and enter another, you lose your bindings. So ng-model="name" in once controller is completely different from ng-model="name" in the second controller.

To make sure that they are the same, you need to create a service that will share data between controllers. You can make it like a simple storage service without any bindings.

When you want to update the data, you need to save it in the service as well. And whenever you want to edit it, you need to pull that data out of it, and populate your models.

Example of such service:

app.service("storageService", function() {
  this.data = {};
  this.set = function(name, position, btnName) {
    this.data = {
      "name": name,
      "position": position,
      "btnName": btnName
    };
  }
  this.get = function() {
    return this.data;
  }
  this.clear = function() {
    this.data = {
      "name": null,
      "position": null,
      "btnName": null
    };
  }
})

The you can inject it into your controllers and use it's functions:

usercontroller

app.controller("usercontroller", function($scope, $http, storageService) { // <-- note the injection
  $scope.updateData = function(name, position) {
    $scope.name = name;
    $scope.position = position;
    $scope.btnName = "Update";
    storageService.set($scope.name, $scope.position, $scope.btnName); // saving data
  }
});

EditController

app.controller("EditController", function($scope, $http, storageService) {
  var d = storageService.get(); // loading data
  $scope.name = d.name;
  $scope.position = d.position;
  $scope.btnName = "Update"; // = d.btnName;
  $scope.update_data = function() {
    $http.post(
      "edit.php", {
        'name': $scope.name,
        'position': $scope.position,
        'btnName': $scope.btnName
      }
    ).success(function(data) {
      alert(data);
      $scope.name = null;
      $scope.position = null;
      $scope.btnName = "Update";
    });
  }
});