如何使用angularjs+php更新数据?

ma8fv8wu  于 2021-06-20  发布在  Mysql
关注(0)|答案(1)|浏览(315)

我需要使用angularjs+php更新mysql数据库中的数据。 Dashboard.html 我的第一页只给出了两个字段:name和position,我使用 ng-repeat 获取代码后,用户将单击编辑按钮,它将重定向到 edit.html 具有相同字段的页面:名称和位置。帮我把那个名字和位置的数据取出来 edit.html 页码

Jmeter 板.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>

这是我的 edit.html 页面和我使用的 ng-model 从中绑定数据 dashboard.html ,但不具有约束力。我单击update按钮,数据必须用id更新,我还提到了我的php文件。
我的db名称示例和名为demo的表。

编辑.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>

编辑.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';
                }
            }
        }
    ?>
qrjkbowd

qrjkbowd1#

您有两个不同的控制器: usercontroller 以及 EditController . 一旦你离开一个进入另一个,你就失去了你的绑定。所以呢 ng-model="name" 在一次控制器是完全不同的 ng-model="name" 在第二个控制器中。
为了确保它们是相同的,您需要创建一个在控制器之间共享数据的服务。您可以使它像一个简单的存储服务,而不需要任何绑定。
当您想要更新数据时,还需要将其保存在服务中。无论何时你想要编辑它,你都需要从中提取数据,然后填充你的模型。
此类服务的示例:

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

您可以将其注入控制器并使用其功能:

用户控制器

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

编辑控制器

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

相关问题