使用angular.js重置模型

Question

我只是嘗試重置這樣的值：

$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有一個工作示例

Answer 1

這真是一個關於JavaScript的問題（所以我添加了“javascript”標簽）。 將JavaScript對象（例如數組$ scope.initial）分配給變量時，它是通過引用而不是通過副本分配的。 所以，這句話

$scope.datas= $scope.initial;

導致$ scope.datas指向$ scope.initial對象。 對$ scope.datas或$ scope.initial所做的任何更改都會影響同一（單個）對象。 由於ng-model用於數據綁定對象元素data1和data2，因此對文本輸入的任何更改都將更改$ scope.datas引用的對象的data1和data2元素 - 即$ scope.initial。 要查看此操作，請將以下內容添加到您的小提琴的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> 

小提琴

Answer 2

嘗試更改reset功能以使用angular.copy

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

Answer 3

@Mark Rajcok：別誤會我的意思，但我想是的

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

不是替代語法

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

我理解它的方式：

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

創建$ scope.initial的副本並將引用分配給$ scope.datas。

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

使用$ scope.initial值更新$ scope.datas值

請參閱angularjs docs（ http://docs.angularjs.org/api/angular.copy ），以及Return語句中的sektion

返回如果指定了目標，則復制或更新目標。

Answer 4

工作語法：

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

API參考 ： angular.copy(source[, destination]);

Answer 5

請考慮以下按鈕

• 編輯
• 保存
• 取消

當用戶單擊編輯並更改數據，然后使用取消按鈕獲取舊數據時，您可以通過以下方式實現此目的。

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

參考

• angular.copy
• Orignal Post

Answer 6

我喜歡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();
};

Answer 7

我已經像你們所說的那樣通過維持備份來使用但在使用它時我遇到了一個問題。
我想如果我在這里發布它會對其他人有所幫助

我有個人資料部分代碼如下：

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

如果它沒有任何意義，請原諒我..