php - 使用 AngularJS 和 PHP 向 MySQL 表插入数据后显示空值

Question

我是 AngularJS 和 PHP 新手，我正在尝试将一些数据添加到 MySQL 中。但是 MySQL 表显示空值而不是我要插入的数据。

HTML:

<form data-ng-controller="myCtrl">
     <label for="roomName">Room Name: </label>
     <input type="text" name="roomName" data-ng-model="roomName" id="roomName" />

     <br />

     <label for="maxPerson">Maximum Person: </label>
     <input type="text" name="maxPerson" data-ng-model="maxPerson" id="maxPerson" />
     <button type="submit" class="btn btn-default" data-ng-click="addRoom()">Add</button>
</form>

app.js( Controller )

app.controller("myCtrl", function ($scope, $http) {
     "use strict";

     $scope.addRoom = function () {
         $http.post("add_library_room.php", {'roomName': $scope.roomName, 'maxPax': $scope.maxPerson})
             .then(function (response) {
                 $scope.msg = "Room is inserted into database.";
             });
     };
});

add_library_room.php(插入数据)

<?php

define("HOSTNAME","localhost");
define("USERNAME","root");
define("PASSWORD","");
define("DATABASE", "booking_db");

$dbhandle=new mysqli(HOSTNAME, USERNAME, PASSWORD, DATABASE) or die ("Unable to Connect to the Database");

$data=json_decode(file_get_contents("php://input"));

$room_Name=$dbhandle->real_escape_string($data->roomName);
$max_Pax=$dbhandle->real_escape_string($data->maxPax);

$query="INSERT INTO library_discussion_room (room_name, max_pax) VALUES ('$room_Name', '$max_Pax')";

$dbhandle->query($query);

?>

phpMyAdmin MySQL 数据库(我插入的值为空): Image Link

我不知道我做错了什么。希望你们能帮我解决这个问题。谢谢。

Answer 1

这是因为您直接尝试在示波器上写入数据。 Angular JS 通常在指令内创建子作用域，以避免弄乱更高级别的数据。 所以如果你直接写 ng-model="something" ，那么它将只是一个不同的，而不是一个引用。

为了使其工作，您需要创建一个对象，并引用它的属性，因为 Angular 也会在父范围中搜索该对象。

所以解决方案将是这样的:

ng-model="object.property"

然后在你的 Controller 中

$scope.object = {};
$scope.addRoom = function () {
     $http.post("add_library_room.php", {'roomName': $scope.object.roomName, 'maxPax': $scope.object.maxPerson})
         .then(function (response) {
             $scope.msg = "Room is inserted into database.";
         });
 };