Angularjs orderBy в ng-repeat влияет на индекс.Как удалить правильные элементы из массива?

Question

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

HTML, который работает:

<tbody data-ng-repeat="oneUserRole in ui.userRoleResultsList track by $index">
    <tr>
      <td>{{oneUserRole.UserId}}</td>
      <td>{{oneUserRole.RoleName}}</td>
      <td>{{oneUserRole.Details}}</td>
      <td class="text-center">
         <button type="button" class="btn btn-sm btn-danger" title="Delete" data-ng-click="ui.removeUserRole($index)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
      <td>
    </tr>
<tbody>

HTML, который не работает (сортируется по желанию, но удаление не работает из-за проблемыс индексом):

<tbody data-ng-repeat="oneUserRole in ui.userRoleResultsList | orderBy: 'RoleName' track by $index">
    <tr>
      <td>{{oneUserRole.UserId}}</td>
      <td>{{oneUserRole.RoleName}}</td>
      <td>{{oneUserRole.Details}}</td>
      <td class="text-center">
         <button type="button" class="btn btn-sm btn-danger" title="Delete" data-ng-click="ui.removeUserRole($index)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
      <td>
    </tr>
<tbody>

JavaScript:

$scope.ui.removeUserRole = function (index) {
   // remove row from array.
   $scope.ui.userRoleResultsList.splice(index, 1);
  // other code to remove selected item from db omitted here.
}

Answer 1

Я закончил тем, что попробовал предложения и Jelle и Frank Modica.Спасибо каждому из вас за ваши быстрые ответы.Наиболее эффективным способом была предварительная фильтрация списка, поступающего с контроллера, а не изменение HTML.

Вот моя функция контроллера, которая получает данные в $ scope.ui.userRoleResultsList:

    // ******************************************************************
    // Get the existing active User Roles 
    // ******************************************************************
    function LoadUserRoleResultsList() {
        var errorSummary = 'Error retrieving UserRoles list';
        $scope.ui.userRoleResultsList = [];
        $scope.promise =
            $http.get(appConfig.GetRootUrl() + '/AdminUserRoles/UserRoleList')
                .then(function onSuccess(response) {

                    var result = apiResponseParser.Parse(response);
                    if (result.isSuccessful && result.data !== null) {
                        // presort by rolename.
                        $scope.ui.ddlUserRoleTypes = result.data;
                        $scope.ui.userRoleResultsList = $filter('orderBy')($scope.ui.ddlUserRoleTypes, 'RoleName');
                    }
                    else {
                        ReportErrorMessage(errorSummary, result.message); 
                    }
                })
            .catch(function onError(response) {
                console.log(response, " = caught response Error");
                    ReportHttpError(errorSummary, response);
                });
    }

Магия заключается в двух строках после // предварительной сортировки по комментарию на имя пользователя.

Answer 2

Если вы измените значение

<button type="button" class="btn btn-sm btn-danger" title="Delete" data-ng-click="ui.removeUserRole($index)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>

на

<button type="button" class="btn btn-sm btn-danger" title="Delete" data-ng-click="ui.removeUserRole({oneUserRole.UserId)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>

И затем отфильтруйте его по userId следующим образом:

$scope.ui.removeUserRole = function (userId) {    
for(let i = $scope.ui.userRoleResultsList.length; i > 0; i--) {
    if(userId == $scope.ui.userRoleResultsList[i]) {
        $scope.ui.userRoleResultsList.splice(i, 1);  
        break;   
    }
}  

}

Это должно работать, я думаю