Question

我有一个不同视角的角度应用程序。在第一个视图中我创建了一个变量，在第二个视图中我必须编辑它。我用这个“sessionStorage”。在第一个视图中，当我转到另一个页面时，我在$ sessionStorage上记录变量列表。

当我开始第二个视图时，我得到了这些数据。在这个视图中，我希望能够编辑或不编辑值。当我点击有效按钮时，我会记录新值，当我按下取消按钮时，我会得到初始值。

这是第二个视图的js文件。

angular.module('testNgStorageApp')
  .controller('MainCtrl', function ($scope, $sessionStorage) {
    var listNameRecorded = $sessionStorage.namesRecord;
    $scope.listNameTemp = listNameRecorded || [];

    $scope.edit = function(index){
        console.log("before", $scope.listNameTemp, listNameRecorded, $sessionStorage.namesRecord)
        $scope.listNameTemp[index] = $scope.newText;
        console.log("after", $scope.listNameTemp, listNameRecorded, $sessionStorage.namesRecord)
    }
...
});

HTML

<div ng-repeat="name in listNameTemp">
    <span>{{name}}</span>
    <input ng-model="newText"/>
    <button ng-click="edit($index)">Edit</button>
  </div>

我的问题是当我编辑值（$ scope.listNameTemp）时，$ sessionStorage.namesRecords会自动修改。

Answer 1

$scope.listNameTemp正在修改的原因是angular.copy()的引用已分配给angular.copy()。

您可以使用angular.module('testNgStorageApp') .controller('MainCtrl', function ($scope, $sessionStorage) { var listNameRecorded = angular.copy($sessionStorage.namesRecord); $scope.listNameTemp = listNameRecorded || []; $scope.edit = function(index){ console.log("before", $scope.listNameTemp, listNameRecorded, $sessionStorage.namesRecord) $scope.listNameTemp[index] = $scope.newText; console.log("after", $scope.listNameTemp, listNameRecorded, $sessionStorage.namesRecord) } ... });来解决此问题。 {{1}}创建并返回传递给它的对象的全新副本。

更新代码：

{{1}}

获取sessionStorage并恢复值

1 个答案: