35

私は単に次のように値をリセットしようとしています:

$scope.initial = [
    {
        data1: 10,
        data2: 20
    }            
];


$scope.datas= $scope.initial;


$scope.reset = function(){
  $scope.datas = $scope.initial;  
}

しかし、それは何も生成しません。それを修正するアイデアはありますか?

angular.module('app', []).controller('MyCtrl', function($scope) {
  $scope.initial = [
    {
      data1: 10,
      data2: 20
    }            
  ];

  $scope.datas= $scope.initial;

  $scope.reset = function(){
    $scope.datas = $scope.initial;  
  } 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="data in datas">
    <input type="text" ng-model="data.data1" />
    <input type="text" ng-model="data.data2" />
  </div>
  <a ng-click="reset()">Reset to initial value</a>
  or     
  <button ng-click="name = initial">Reset to initial value</button>
  <hr />
  <p ng-repeat="data in datas">{{data.data1}}, {{data.data2}}</p>
</div>

jsfiddleに実用的な例があります

4

7 に答える 7

56

これは実際には JavaScript に関する質問です (「javascript」タグを追加しました)。JavaScript オブジェクト (配列 $scope.initial など) が変数に割り当てられる場合、コピーではなく参照によって割り当てられます。ですから、この発言は

$scope.datas= $scope.initial;

$scope.datas は $scope.initial オブジェクトを指します。$scope.datas または $scope.initial に加えられた変更は、両方とも同じ (単一の) オブジェクトに影響します。ng-model はオブジェクト要素 data1 と data2 をデータバインドするために使用されるため、テキスト入力を変更すると、$scope.datas が参照するオブジェクト (つまり $scope.initial) の data1 要素と data2 要素が変更されます。これを実際に確認するには、フィドルの HTML に次を追加します。

<p>{{initial}}</p>

テキスト ボックスの値を変更すると、$scope.initial も変更されていることがわかります。

@Max は部分的な回答を提供しました。reset 関数で angular.copy() を使用します。ただし、初期割り当てでも angular.copy() を使用する必要があります。

 $scope.datas = angular.copy($scope.initial);

アップデート：

@EpokK が彼の回答で示しているように、別の解決策は次のとおりです。

angular.copy($scope.initial, $scope.datas);

@bekite が回答で言及しているように、@EpokK のソリューションは別のオブジェクトを作成しません。

完全なコード 

angular.module('app', []).controller('MyCtrl', function($scope) {
  $scope.initial = [{
    data1: 10,
    data2: 20
  }];
  $scope.datas = angular.copy($scope.initial);
  $scope.reset = function () {
    $scope.datas = angular.copy($scope.initial);
    // or
    // angular.copy($scope.initial, $scope.datas);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="data in datas">
    <input type="text" ng-model="data.data1" />
    <input type="text" ng-model="data.data2" />
  </div> 
  <a ng-click="reset()">Reset to initial value</a>
  or
  <hr />
  <p ng-repeat="data in datas">{{data.data1}}, {{data.data2}}</p>{{initial}}
</div>

fiddle

于 2012-10-26T19:29:58.297 に答える
13

reset使用する機能を変更してみるangular.copy

$scope.reset = function () {
    $scope.datas = angular.copy($scope.initial);
};
于 2012-10-26T11:00:47.267 に答える
8

作業構文:

$scope.reset = function () {
    angular.copy($scope.initial, $scope.datas);
};

API リファレンス:angular.copy(source[, destination]);

于 2013-06-28T06:52:21.627 に答える
4

次のボタンを検討してください

  • 編集
  • 保存
  • キャンセル

ユーザーが編集をクリックしてデータを変更し、キャンセルボタンを使用して古いデータを取得する場合、これを実装する方法を次に示します。

HTML

<div>
    <button data-ng-click="edit()" data-ng-show="!editing">Edit</button>
    <button data-ng-click="save()" data-ng-show="editing">Save</button>
    <button data-ng-click="cancel()" data-ng-show="editing">Cancel</button>
</div>

AngularJs

$scope.edit = function () {
    $scope.editing = true;
    $scope.copy = angular.copy($scope.data);
};

$scope.cancel = function () {
    $scope.editing = false;
    $scope.data = $scope.copy;
};

参考文献

于 2014-05-19T07:07:10.673 に答える
0

Yasser のコメントが大好きです。明確で簡潔です。

私は間違いなく、編集を開始するときに値をコピーし、キャンセル/保存時に参照を置き換えることを好みます。

私は、元のデータではなくローカル コピーにバインドし、保存時にのみ最終データを変更することを好みます。これにより、後であらゆる種類のバグが防止され、編集動作がカプセル化されます。

最終的なバージョンは次のようになります。

function initValue() {
    $scope.bound = angular.copy($scope.data);
}

function setValue() {
    $scope.data = $scope.bound;
}

$scope.edit = function () {
    $scope.editing = true;
    initValue();
};

$scope.cancel = function () {
    $scope.editing = false;
    initValue();
};

$scope.save= function () {
    $scope.editing = false;
    setValue();
};
于 2015-04-13T12:28:41.750 に答える
0

上記のようにバックアップを維持して使用してきましたが、使用中にもう1つの問題に直面しました。
ここに投稿すると、他の人の役に立つと思いました

私は以下のようにプロファイルセクションコードを持っています:

var profileBackup ={};
$scope.profileContinue = function()
{
  profileBackup = angular.copy($scope.userData.profile); 
//  profileBackup = $scope.userData.profile; 
//other code
}

$scope.profileCancel = function()
{
$scope.userData.profile = profileBackup;
}

しかし、モデルが変更されたときに、非スコープ変数 profileBackup でさえ更新されているのを見て驚きました (この場合、参照が返されると思います)。

次に、コードを次のように変更しました。

$scope.profileContinue = function()
{
  profileBackup = angular.toJson($scope.userData.profile); 
//  profileBackup = $scope.userData.profile; 
//other code
}

$scope.profileCancel = function()
{
$scope.userData.profile = angular.fromJson(profileBackup);
}

意味不明だったら許してください..

于 2015-07-06T08:13:28.560 に答える