AngularJS过滤后如何将选中行对象传递至外部模态框删除函数

Hey there! Let's work through this problem together—this is a super common gotcha when dealing with filtered ng-repeat in AngularJS, but it's easy to fix once you shift from tracking indexes to tracking actual objects.

The Problem with $index #

When you apply a filter to ng-repeat, the $index refers to the position in the filtered array, not the original sessions array. That's why your selection breaks after filtering—your stored rowIndex no longer maps to the correct object in the original dataset. The fix is to track the selected session object directly instead of an index.

Step-by-Step Solution #

1. Update Your Controller to Track the Selected Object

Instead of storing a rowIndex, store the entire selected session in your scope. Modify your selectRow function to accept the session object itself:

$scope.selectedSession = null; // Track the selected session object

$scope.selectRow = function(session) {
  // Toggle selection: if clicking the already selected row, deselect it
  if (session === $scope.selectedSession) {
    $scope.selectedSession = null;
  } else {
    $scope.selectedSession = session;
  }
};

// Your delete function will now work with the selected object directly
$scope.deleteSession = function(session) {
  // Find the index of the session in the original array
  const sessionIndex = $scope.sessions.indexOf(session);
  if (sessionIndex !== -1) {
    $scope.sessions.splice(sessionIndex, 1); // Remove the object from the array
    $('#deleteSessionModal').modal('hide'); // Close the modal
    $scope.selectedSession = null; // Clear selection after deletion
  }
};

2. Update the Table ng-repeat to Use the Object

Modify your HTML to pass the session object to selectRow, and check against the stored selectedSession for the highlight class:

<tr ng-repeat="session in sessions | filter:yourFilter" 
    ng-class="{'bg-primary': selectedSession === session}" 
    ng-click="selectRow(session)">
  <!-- Your table columns here, e.g.: -->
  <td>{{session.id}}</td>
  <td>{{session.name}}</td>
  <!-- Other columns -->
</tr>

Replace yourFilter with whatever filter you're using for your table.

3. Wire Up the Modal's Delete Button

Since your modal is in the same scope as the table (assuming you're using a single controller for both), you can directly pass the selectedSession to your deleteSession function:

<div id="deleteSessionModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <h4 class="modal-title">Delete Session</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete this record?</p>
          <p class="text-warning">
            <small>This action cannot be undone.</small>
          </p>
        </div>
        <div class="modal-footer">
          <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
          <input type="submit" class="btn btn-danger" value="Delete" ng-click="deleteSession(selectedSession)">
        </div>
      </form>
    </div>
  </div>
</div>

Quick Note About Scope #

If your modal uses a separate child scope (e.g., if it's loaded via ng-include or a directive), you'll want to wrap your selectedSession in an object to avoid scope inheritance issues. For example:

$scope.selection = {
  selectedSession: null
};

Then update your HTML to reference selection.selectedSession instead of selectedSession. This works because object references are shared across child scopes, whereas primitive values (like strings/numbers) are copied.

This approach will work reliably whether your table is filtered or not, since you're always dealing with the actual session object rather than a fragile index.

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