这是我的ctrl:
app.controller('ctrl', function ($window, $scope) {
$scope.initData = [
{
firstName: "John",
lastName: "Doe",
},
{
firstName: "Jane",
lastName: "Doe",
},
{
firstName: "John",
lastName: "Smith",
}
];
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
$scope.retrievedData = JSON.parse($window.localStorage.getItem('initData'));
console.log($scope.retrievedData);
$scope.sortedType = 'firstName';
$scope.sortedReverse = false;
$scope.removeRow = function (row) {
$scope.retrievedData.splice(row, 1);
$window.localStorage.removeItem('initData');
}
});
HTML:
<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>
我的
ng-controller
和ng-app
是在html中分配的,因此我们不必担心。 removeRow()
函数在这里发生的事情是我设法删除了该行,但是我也需要它从localStorage
中删除它。此时,$window.localStorage.removeItem('initData');
是不可选项,因为它会删除整个对象。我怎样才能做到这一点?如何删除
localStorage
中仅包含与行一起删除的数据的部分?编辑:我了解我无法编辑键值,但是如何设置新的键值?将
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
放在函数中并没有真正的帮助。索拉丁:感谢那些回答。我通过在
$scope.initData.splice(row, 1);
下面添加$scope.retrievedData.splice(row, 1);
来修复它。我发现我已经在row
参数中使用索引了。之后,我写了:$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
谢谢。 最佳答案
无法编辑localStorage值的内容,只能覆盖它。
您应该做的是编辑$scope.initData
,然后使用$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
覆盖它。
您需要添加更改以单击ng-click="removeRow($index)"
($index
是当前重复的元素索引),然后在函数中
$ scope.removeRow =函数(rowIndex){
$ scope.retrievedData.splice(rowIndex,1);
$ window.localStorage.setItem('initData',JSON.stringify($ scope.retrievedData));
}
由于u在再次保存到本地存储之前更改了retrievedData
,因此它将具有数据的新值-即无行。