为什么 ng-repeat 对自动递增的 id 表现得很奇怪？

Question

我有一个插入 MySQL 数据库的表单。
POST 请求和 GET 请求完美工作。

我决定在 MySQL table 中添加一个 id 列。
用于添加我的 id 列的 SQL 语句是：
ALTER TABLE thestuff ADD COLUMN id INT AUTO_INCREMENT UNIQUE FIRST;

在我在 table 中添加 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
  };

});

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

Answer 1

在 insertController 中您缺少 id 参数

resultsService.addItem($scope.date, $scope.content); //wrong

因此日期被分配给 id。

正确： resultsService.addItem(res.id, $scope.date, $scope.content);

为什么 ng-repeat 对自动递增的 id 表现得很奇怪？

Why does ng-repeat behave weird with auto-incrementing id?

php

mysql

auto-increment

angularjs

angularjs-ng-repeat