在AngularJS中排序時刪除行和localStorage密鑰

Question

我有一個簡單的表，它正從localStorage加載數據。點擊刪除按鈕後，行被刪除（每次點擊1次），從localStorage刪除鍵。

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自動排序），或者當我做反向排序，並單擊刪除，該刪除的第一行始終是我的array中的第一個object。所以，可以說我想刪除"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功能就像this.You在你的localStorage設置「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

​​