我有一个可以插入 MySQL 数据库的表单。
POST 请求和 GET 请求完美配合。
我决定在 MySQL 表中添加一个 id 列。
用于添加我的 id 列的 SQL 语句是:
ALTER TABLE thestuff ADD COLUMN id INT AUTO_INCRMENT UNIQUE FIRST;
在表中添加 id 列之前，当我输入日期和内容并按下提交时，提取将完美运行，并且日期和内容将立即出现。
但是现在我添加了 id 列，当我添加日期和内容并按提交时，日期和内容会立即显示，但 id 也应该显示，但由于某种原因它没有显示。
我已经尝试了所有方法，但无法弄清楚为什么 id 有延迟。
对我来说，显示 id 的唯一方法是刷新页面。
如有任何建议，我们将不胜感激!
谢谢!
之前
之后
HTML
<body ng-app="myApp">
<div ng-controller="insertController">
<h2> What I learned today </h2>
<form>
Date <br>
<input type="text" ng-model="date"><br><br>
Content <br>
<textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
<input type="button" value="Submit" ng-click="insertdata()">
</form>
</div>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div class="card">
id: {{item.id}}<br>
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
<button class="deleteButton" ng-click="deleteThisItem()"> x </button>
</div>
<br><br>
</span>
</div>
</body>
fetch.php
<?php
header('Access-Control-Allow-Origin: *'); // clientside(Node) <-> serverside(PHP)
$theConnection = new mysqli("localhost", "root", "", "storestuff");
if($theConnection->connect_error) {
printf("Connection failed: %s\n", $theConnection->connect_error);
exit();
}
$query = "SELECT * FROM thestuff";
$theData = array();
if($result = $theConnection->query($query)) {
while($row = mysqli_fetch_array($result)) {
$theData[] = array(
'id'=>$row['id'],
'date'=>$row['date'],
'content'=>$row['content']);
}
echo json_encode($theData); // Echo the output for the controller to access
$result->free(); // Free the result set
}
else {
echo "0 results.";
}
$theConnection->close(); // Close the connection
?>
fetchController.js
var size = 0;
var count = 0;
app.controller('fetchController', function ($scope, $http, resultsService) {
$http.get('http://localhost/storestuff/fetch.php')
.then(function successCallback(response) {
size = (response.data).length;
while(count < size) {
var id = response.data[count].id;
var date = response.data[count].date;
var content = response.data[count].content;
resultsService.addItem(id, date, content);
count++;
}
size = 0;
count = 0;
$scope.results = resultsService.getItems();
});
});
Result.js
app.service('resultsService', function() {
var results = new Array();
var addItem = function(id, date, content) {
var obj = new Object();
obj['id'] = id;
obj['date'] = date;
obj['content'] = content;
results.push(obj);
}
var getItems = function() {
return results;
}
var deleteItem = function() {
}
return {
addItem: addItem,
getItems: getItems,
deleteItem: deleteItem
};
});
插入.php
<?php
header('Access-Control-Allow-Origin: *');
$theConnection = mysqli_connect("localhost", "root", "", "storestuff");
if(mysqli_connect_errno()) {
echo "Failed to connect to MySQL.";
}
$theData = json_decode(file_get_contents('php://input'));
$date = mysqli_real_escape_string($theConnection, $theData->date);
$content = mysqli_real_escape_string($theConnection, $theData->content);
mysqli_query($theConnection, "INSERT INTO thestuff(date, content) VALUES('$date', '$content')");
mysqli_close($theConnection);
?>
insertController.js
var app = angular.module('myApp', []);
app.controller('insertController', function($scope, $http, resultsService) {
$scope.insertdata = function() {
$http({
method: 'POST',
url: 'http://localhost/storestuff/insert.php',
data: {'date':$scope.date, 'content':$scope.content, 'in':'json-format'},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(function(res) {
console.log("Successful response", res)
resultsService.addItem($scope.date, $scope.content);
$scope.date = "";
$scope.content = "";
})
.catch(function(err) {
console.error("Error with POST", err);
});
}
});
最佳答案
在 insertController 中，您缺少 id 参数
resultsService.addItem($scope.date, $scope.content); //wrong
因此日期被分配给id。
正确:
resultsService.addItem(res.id, $scope.date, $scope.content);
关于php - 为什么 ng-repeat 在自动递增 id 时表现得很奇怪？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44039027/