Angular ng-repeat filter passing wrong index

Question

I'm having trouble figuring out how to pass the right index number from an ng-repeat with a filter. I'm using a modal-window to edit rows in a table. The problem is I rely on the index number to make a REST call and get the correct data for my edit modal window.

The ng-repeat code:

    <tr ng-repeat="myItem in myItems | filter:{Status :'!Completed'}">
      <td data-title="Title">{{myItem.Title}}</td>
      <td data-title="Category">{{myItem.Category}}</td>
      <td data-title="Priority">{{myItem.Priority}}</td>
      <td data-title="Due Date">{{myItem.DueDate}}</td>
      <td data-title="Due Date">{{myItem.Status}}</td>
      <td data-title="Due Date">{{myItem.AssignedTo}}</td>
      <td data-title="Edit"><span class="mdi-content-create editIcon" data-ng-click="openEditModal($index)" style="cursor:pointer"></span></td>
      <td data-title="Delete"><span style="  margin-left: 10px;" class="mdi-content-clear editIcon" ng-confirm-click="Are you sure you want to delete this request?" confirmed-click="deleteItem($index)" style="cursor:pointer"></span></td>
    </tr>

The code for passing index to the modal:

$scope.openEditModal = function(index) {
var modalInstance = $modal.open({
    controller: 'modalCtrl',
    templateUrl: 'https://xxxx/App/editModal.html',
    windowClass: "editModal",
    resolve: {
        index: function() {
            return index;
            console.log(index);
        }
    }
});
}

The index number is need to get the id of the current item, in order to make the right $http get call.

But the filter changes the order of index, and I can't seem to find a good alternative.

Any suggestions?

Solution:

Passing the object/item instead of the index seems to do the job:

HTML:

data-ng-click="openEditModal(myItem)

JS:

$scope.openEditModal = function(myItem) {
    var idx = $scope.myItems.indexOf(myItem);
    var modalInstance = $modal.open({
        controller: 'modalCtrl',
        templateUrl: 'https://xxxx/App/editModal.html',
        windowClass: "editModal",
        resolve: {
            index: function() {
                return idx

            }
        }
    });
}

I can now use the ID to edit/delete the right item. This of course requires an ID associated with the item. As pointed out in comments an ID can come in handy in many situations.

Thx for the help!

Answer 1

The filter messing with your index is a common problem.

You can bypass it by implementing the logic like this instead:

<tr ng-repeat="myItem in myItems" ng-show="myItem.Status !== 'Completed'">
  <td data-title="Title">{{myItem.Title}}</td>
  <td data-title="Category">{{myItem.Category}}</td>
  <td data-title="Priority">{{myItem.Priority}}</td>
  <td data-title="Due Date">{{myItem.DueDate}}</td>
  <td data-title="Due Date">{{myItem.Status}}</td>
  <td data-title="Due Date">{{myItem.AssignedTo}}</td>
  <td data-title="Edit"><span class="mdi-content-create editIcon" data-ng-click="openEditModal($index)" style="cursor:pointer"></span></td>
  <td data-title="Delete"><span style="  margin-left: 10px;" class="mdi-content-clear editIcon" ng-confirm-click="Are you sure you want to delete this request?" confirmed-click="deleteItem($index)" style="cursor:pointer"></span></td>
</tr>

Answer 2

A more safer alternative would be, to introduce a unqiue id for your objects myItem.id, and use this as an identifier which resource to load in your http requests. So you don't have to rely on the $index, which can cause some problems as Tomek Sulkowski pointed out (and the behaviour may change with different angular versions).