javascript - 在 AngularJS 中排序时删除行和 localStorage 键

Question

我有一个简单的表，正在从 localStorage 加载数据。单击“删除”按钮后，行将被删除(每次单击 1 行)，并且 localStorage 中的 key 将被删除。

TL;DR 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>

ctrl.js:

    app.controller('ctrl', function ($window, $scope) {

        $scope.initData = [
            {
                firstName: "John",
                lastName: "Doe",  
            },
            {
                firstName: "Jane",
                lastName: "Doe",
            },
            {
                firstName: "John",
                lastName: "Smith",
            }
        ];



if(!localStorage.getItem('initData')) {
    $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
}
        $scope.retrievedData = JSON.parse($window.localStorage.getItem('initData'));
        $scope.sortedType = 'firstName';
        $scope.sortedReverse = false;
        //Remove Rows and Update localStorage Key Values
        $scope.removeRow = function(row) {
            $scope.retrievedData.splice(row, 1);
            $scope.initData.splice(row, 1);
            $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
        }
    });

这里发生的情况是，当我对数据进行排序(并且它会自动按 firstName 排序)或当我进行反向排序并单击删除时，删除的第一行始终是我的数组中的第一个对象。因此，假设我想删除 "John Smith" 所在的行，然后单击“删除”按钮，“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 现在最后一个对象被删除。

我在这里能做什么？

谢谢。

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

并像这样更改您的removeRow函数。您必须将本地存储中的'initData'设置为$scope.retrievedData，因为每次刷新页面时，initData都会重新初始化，因此会再次拼接initData将其设置为 localstorage 是不合逻辑的。

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

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

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