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

时间:2018-09-06 10:26:43

标签: php mysql angularjs

我需要使用AngularJS + PHP从MySQL DB更新数据。

<button (click)="somemethod()"></button> 是我的第一页,我只给出两个字段:名称和位置,我用Dashboard.html从数据库中获取数据,在获取代码后,用户将单击编辑按钮,它将重定向到ng-repeat页面,并使用相同的字段:名称和位置。帮我在edit.html页面中获取该名称和位置数据

Dashboard.html

edit.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,但没有约束力。然后单击更新按钮,数据必须使用ID更新,并且我也提到了我的PHP文件。

我的数据库名称示例和名为 demo 的表。

Edit.html

dashboard.html

Edit.php

<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>

1 个答案:

答案 0 :(得分:0)

您有两个不同的控制器:Try to use Raw query like this ================================== $data=DB::select(DB::Raw("select t1.BOOKCODE,(total-selled) as available from (select BOOKCODE, SUM(QUNATITY) as total FROM `ordered_books` group by `BOOKCODE`) as t1,(SELECT BOOKCODE,SUM(QUNATITY) as selled FROM `books_out` group by `BOOKCODE`) as t2 where t1.BOOKCODE=t2.`BOOKCODE`")); print_r($data); //To get total books for each of the book code SELECT BOOKCODE,SUM(QUNATITY) FROM `ordered_books` group by `BOOKCODE` //To get total books_out for each of the book code SELECT BOOKCODE,SUM(QUNATITY) FROM `books_out` group by `BOOKCODE`usercontroller。一旦离开一个并输入另一个,就会失去绑定。因此,一次控制器中的EditController与第二个控制器中的ng-model="name"完全不同。

为确保它们相同,您需要创建一个将share data between controllers的服务。您可以使其像一个没有任何绑定的简单存储服务。

要更新数据时,还需要将其保存在服务中。而且,每当要对其进行编辑时,都需要从中提取数据,并填充模型。

此类服务的示例:

ng-model="name"

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

usercontroller

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

EditController

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