Javascript 在AngularJS中排序时删除行和本地存储键

我有一个从localStorage加载数据的简单表。单击“删除”按钮后，每单击一次将删除一行，并删除localStorage中的键

TL；orderBy博士正在导致失去索引的跟踪

现在，当我引入排序和反向排序功能时，问题就出现了。 简而言之，这是我的代码

<table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th>
                        <span ng-show="sortedType == 'firstName' && sortedReverse" class="fa fa-long-arrow-up"></span>
                        <span ng-show="sortedType == 'firstName' && !sortedReverse" class="fa fa-long-arrow-down"></span>
                        <span href="#" ng-click="sortedType = 'firstName'; sortedReverse = !sortedReverse" style="cursor:pointer;">First Name</span>
                    </th>
                    <th>
                        <span ng-show="sortedType == 'lastName' && sortedReverse" class="fa fa-long-arrow-up"></span>
                        <span ng-show="sortedType == 'lastName' && !sortedReverse" class="fa fa-long-arrow-down"></span>
                        <span href="#" ng-click="sortedType = 'lastName'; sortedReverse = !sortedReverse" style="cursor:pointer;">Last Name</span>
                    </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="(k, v) in retrievedData | orderBy: sortedType: sortedReverse">
                <td>{{v.firstName}}</td>
                <td>{{v.lastName}}</td>
                <td>
                    <button class="btn btn-primary">Edit</button>
                    <button class="btn btn-primary" ng-click="removeRow();">Delete</button>
                </td>
            </tr>
            </tbody>
        </table>

这里发生的情况是，当我对数据进行排序并按firstName自动排序时，或者当我进行反向排序并单击delete时，被删除的第一行始终是数组中的第一个对象。假设我想删除John Smith所在的行，然后单击delete按钮，John Doe对象被删除。我试着用indexOf来解决这个问题，但我做不到

以下是我尝试过的：

$scope.removeRow = function(rowIndex) {
        var index = $scope.retrievedData.indexOf(rowIndex);
        $scope.retrievedData.splice(index, 1);
        $scope.initData.splice(index, 1);
        $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
        console.log($scope.retrievedData.indexOf(rowIndex));
    }

因此，我尝试使用.indexOf跟踪索引，但是我的console.log输出-1，现在最后一个对象被删除

我能在这里做什么

---

谢谢。

您可以使用Array.prototype获取对象数组中的索引值

在HTML中，将名称传递给函数调用

        <td>
            <button class="btn btn-primary">Edit</button>
            <button class="btn btn-primary" ng-click="removeRow(v.firstName);">Delete</button>
        </td>

还可以使用findIndex在对象数组中查找对象的索引

var index = $scope.retrievedData.findIndex(obj => obj.firstName=== name);

---

请给我一分钟，但为什么我的方法不起作用，使用简单的indexOf？我认为indexOf对字符串或数字数组有效。什么是行索引？您没有将HTML中的任何参数传递给removeRow函数。哦，您是对的。。在这个函数中可以传递什么作为参数？可以像上面一样传递firstname。现在可以用了吗？这很好，但现在还有另一个问题。。你还在这里，我可以解释一下吗？

$scope.removeRow = function(name) {
        var index = $scope.retrievedData.indexOfname(name);
        $scope.retrievedData.splice(index, 1);
        //$scope.initData.splice(index, 1);
        $window.localStorage.setItem('initData', JSON.stringify($scope.retrievedData));
        console.log($scope.retrievedData.indexOf(rowIndex));
    }

Array.prototype.indexOfname = function(name) {
    for (var i = 0; i < this.length; i++)
        if (this[i].name === name)
            return i;
    return -1;
}

var index = $scope.retrievedData.findIndex(obj => obj.firstName=== name);