AngularJS编辑功能前端视图值无法更新，求技术帮助

Hey there! Let's figure out why your edit functionality's view values aren't updating as expected. Looking at your code snippets, there are a couple of key issues that are likely causing this problem—let's break them down and fix them step by step.

Key Problems in Your Current Code #

1. Missing Two-Way Data Binding
   Your <textarea> is using {{edit.text}} which only does one-way rendering. That means when you type in the textarea, the underlying edit.text value won't update, and vice versa if you change edit.text in your controller, the view might not reflect it properly.

2. Unclear Association to the Current Book
   Your editPost() method isn't receiving the specific book from the ng-repeat loop, so you're not initializing the edit state with the correct book data. Plus, if edit isn't a reference-type object, you might hit AngularJS scope inheritance issues with ng-repeat's child scopes.

3. Redundant Condition Checks
   You're using both ng-show="showEditPost" on the parent div and ng-if="showEditPost == true/false" on the child elements—this isn't breaking things, but it's unnecessary and can make the code harder to follow.

Updated Code Solution #

Step 1: Modify the HTML Template #

First, update your markup to pass the current book to the edit function, add proper two-way binding to the textarea, and clean up the conditionals:

<li ng-click="delegate.editPost(book)">Edit</li>

<div ng-show="delegate.showEditPost">
  <div ng-click="delegate.savePost()">Save</div>
  
  <!-- Show original text when not editing -->
  <p ng-if="!delegate.showEditPost">{{book.text}}</p>
  
  <!-- Edit mode with two-way binding -->
  <div ng-if="delegate.showEditPost">
    <textarea ng-model="delegate.edit.text"></textarea>
  </div>
</div>

Step 2: Update Your Controller Logic #

Make sure your editPost and savePost methods correctly handle the book data and avoid scope issues:

// Assuming your controller uses controllerAs syntax with 'delegate' as the alias
angular.module('yourApp').controller('BookController', function() {
  var vm = this;
  vm.books = [/* your book data here */];
  vm.showEditPost = false;
  vm.edit = {}; // Initialize as an object to avoid scope inheritance problems

  // Initialize edit state with the selected book
  vm.editPost = function(book) {
    // Use angular.copy to create a deep copy—avoids modifying the original book until save
    vm.edit = angular.copy(book);
    vm.showEditPost = true;
  };

  // Save the edited book back to the array
  vm.savePost = function() {
    // Find the index of the original book in the array
    var bookIndex = vm.books.findIndex(function(b) {
      return b.id === vm.edit.id; // Match using your book's unique identifier
    });
    
    if (bookIndex !== -1) {
      // Update the original book with the edited data
      vm.books[bookIndex] = angular.copy(vm.edit);
    }
    
    // Exit edit mode
    vm.showEditPost = false;
  };
});

Why This Works #

• ng-model="delegate.edit.text": Enables two-way data binding, so changes in the textarea immediately update vm.edit.text, and any changes to vm.edit.text in the controller show up in the view.
• Passing book to editPost(): Ensures you're editing the exact book from the ng-repeat loop, not a generic or uninitialized object.
• angular.copy(): Creates a separate copy of the book, so you don't modify the original data in the array until you explicitly click "Save"—this prevents accidental unsaved changes.
• ControllerAs Syntax: Using delegate. (or vm.) prefixes avoids scope inheritance issues that can happen with primitive values in ng-repeat's child scopes.

Give these changes a try, and your edit view should start updating values correctly!

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