AngularJS新手求助：POST提交JSON后如何展示对应ID的提交信息

Hey there! Let's break down what's going on here and fix your AngularJS code to get that newly created segment's info showing up in your view.

First, I spot a common AngularJS $http pitfall in your code: the .then() callback receives a response object, not the raw API data directly. You need to access response.data to get the actual data your API sends back (including the ID and any returned segment details).

Fixed Controller Code #

Here's the adjusted version of your controller snippet with comments explaining the changes:

$scope.master = {};
$scope.newId = null; // Track the returned ID separately

$scope.addSegment = function(fn) {
  // Make a clean copy of the form data to submit
  $scope.master = angular.copy(fn);

  $http.post("your-api-url-here", $scope.master)
    .then(function(response) {
      // Extract the raw API response data
      const apiData = response.data;

      // Store the returned ID first
      $scope.newId = apiData.ID;

      // Use the API's returned details (preferred) or fall back to your submitted data
      $scope.infoName = apiData.Name || $scope.master.Name;
      $scope.infoRoll = apiData.Roll || $scope.master.Roll;
      $scope.infoDuration = apiData.Duration || $scope.master.Duration;
    })
    .catch(function(error) {
      // Always handle errors! Critical for debugging and user feedback
      console.error("Failed to create segment:", error);
      alert("Oops! Couldn't add your segment. Please try again.");
    });
};

View Template Example #

Now add this to your HTML to display the segment info only after the POST succeeds:

<!-- Your input form (example) -->
<form ng-submit="addSegment(segmentForm)">
  <label>Name: <input type="text" ng-model="segmentForm.Name" required></label>
  <label>Roll: <input type="number" ng-model="segmentForm.Roll" required></label>
  <label>Duration: <input type="number" ng-model="segmentForm.Duration" required></label>
  <button type="submit">Create Segment</button>
</form>

<!-- Display the new segment info once we have an ID -->
<div ng-if="newId" class="segment-info">
  <h3>✅ New Segment Created</h3>
  <p><strong>ID:</strong> {{ newId }}</p>
  <p><strong>Name:</strong> {{ infoName }}</p>
  <p><strong>Roll:</strong> {{ infoRoll }}</p>
  <p><strong>Duration:</strong> {{ infoDuration }}</p>
</div>

What If Your API Only Returns an ID? #

If your POST endpoint only sends back the ID (not the full segment details), you'll need to make a follow-up GET request to fetch the info using the new ID:

$http.post("your-api-url-here", $scope.master)
  .then(function(response) {
    $scope.newId = response.data.ID;
    // Fetch the full segment details with the new ID
    return $http.get(`your-api-url-here/${$scope.newId}`);
  })
  .then(function(detailResponse) {
    const segmentDetails = detailResponse.data;
    $scope.infoName = segmentDetails.Name;
    $scope.infoRoll = segmentDetails.Roll;
    $scope.infoDuration = segmentDetails.Duration;
  })
  .catch(function(error) {
    console.error("Error:", error);
    alert("Failed to create or retrieve segment.");
  });

Quick Pro Tips for AngularJS Newbies #

• Use ng-if to hide the info section until you have valid data (prevents empty placeholders).
• Always include the .catch() block to handle network errors or API failures.
• Using angular.copy() to clone your form data is a great practice—it keeps your original input data clean.

内容的提问来源于stack exchange，提问作者WhoAmI