Угловой фильтр ng-repeat, переводящий неправильный индекс

Question

У меня возникли проблемы с выяснением способа передачи правильного номера индекса из ng-repeat с фильтром. Я использую модальное окно для редактирования строк в таблице. Проблема в том, что я полагаюсь на номер индекса, чтобы сделать звонок REST и получить правильные данные для моего модального окна редактирования.

Код нг-повторить:

<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> 

Код для передачи индекса модального:

$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); 
     } 
    } 
}); 
} 

Индексный номер необходимо получить идентификатор текущего элемента, для того, чтобы сделайте правильный звонок $http get.

Но фильтр меняет порядок индекса, и я не могу найти хорошую альтернативу.

Любые предложения?

Решение:

Передача объекта/элемента вместо индекса кажется, чтобы сделать работу:

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 теперь можно использовать идентификатор для редактирования/удаления нужного элемента. Для этого, конечно, требуется идентификатор, связанный с элементом. Как указано в комментариях, идентификатор может пригодиться во многих ситуациях.

Thx для справки!

Answer 1

Взаимодействие фильтра с вашим индексом является общей проблемой.

Вы можете обойти это путем реализации логики, как это вместо:

<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

Более безопасной альтернатива была бы, чтобы ввести уникальное мировоззрение идентификатора для объектов myItem.id, и использовать это в качестве идентификатора, какой ресурс для загрузки в ваши HTTP-запросы. Поэтому вам не нужно полагаться на $index, что может вызвать некоторые проблемы, о которых указал Томек Сулковски (и поведение может измениться с разными угловыми версиями).