AngularJS中ng-repeat无法正确更新scope问题排查

Hey there, let's break down the two problems you're hitting with your dynamic ng-repeat form and walk through potential fixes:

Problem 1: Last row input gets marked as dirty after deleting a non-last row #

This is almost always tied to DOM element reuse in ng-repeat when relying on track by $index. Here's the root cause:

• When you delete a middle row, Angular reuses the DOM elements from the deleted row to render the new last row. If the deleted row's input was dirty, that state gets carried over to the reused element, making it look like the new last row was edited.

Fixes to try: #

• Use a unique identifier for track by: Instead of track by $index, assign each row object a unique id property (like rows track by row.id) when creating new rows. This tells Angular to treat each row as a distinct entity, so it won't reuse DOM elements between rows.
• Initialize fresh state for new rows: When adding a new row, make sure it's a completely fresh object with no leftover state. For example:

  $scope.addRow = function() {
    if ($scope.rows.length < 5) {
      $scope.rows.push({ id: Date.now(), value: '' }); // Unique ID + empty default value
    }
  };
  

• Manual state reset post-deletion: If element reuse still occurs, target the last row's input control and reset its state after deletion. You'll need to access the form's controls (e.g., myForm['input-' + lastRowId].$setPristine()).

Problem 2: Some fields stay invalid after clicking "Cancel" #

Resetting just the model values isn't enough—you also need to reset the form's internal validation state. Here's how to fix this:

Step-by-step solution: #

1. Name your form: Add a name attribute to your form element, e.g., <form name="dynamicForm">.
2. Reset both model and form state in your Cancel function:

   $scope.cancel = function() {
     // Reset rows to their initial state (e.g., 1 empty row)
     $scope.rows = [{ id: Date.now(), value: '' }];
     // Reset the form's pristine/touched state
     if ($scope.dynamicForm) {
       $scope.dynamicForm.$setPristine();
       $scope.dynamicForm.$setUntouched();
     }
   };
   

3. Validate reset logic for dynamic rows: Ensure that when you reset, all rows are fresh objects—no leftover values that might trigger validation rules (like required).

Debugging tip: #

Use the AngularJS Batarang Chrome extension to inspect your form and control states. This lets you see exactly which controls are marked as dirty/invalid and why, helping you pinpoint if the issue is with state reuse or incomplete reset logic.

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