用angular.js重置一个模型

我只是试图重置像这样的值：

$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）被分配给一个variables时，它是通过引用分配的，而不是通过拷贝来分配的。 所以，这个声明

 $scope.datas= $scope.initial; 

导致$ scope.datas指向$ scope.initial对象。 对$ scope.datas或$ scope.initial所作的任何更改都会影响相同（单个）对象。 由于ng-model用于数据绑定对象元素data1和data2，所以对文本input的任何更改都会改变$ scope.datas引用的对象的data1和data2元素，即$ scope.initial。 要看到这一点，请将以下内容添加到小提琴的HTML中：

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

当你改变文本框中的值时，你会看到$ scope.initial也在改变。

@Max提供了一个部分的答案：在复位函数中使用angular.copy（）。 但是，您也必须在初始分配中使用angular.copy（）：

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

---

更新：

正如@EpokK在他的回答中所示，另一个解决scheme是

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

正如@bekite在他的回答中提到的，@ EpokK的解决scheme不会创build另一个对象。

完整的代码

 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

尝试更改resetfunction使用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); 

创build一个$ scope.initial的副本，并将引用赋给$ scope.datas。

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

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

查看angularjs文档（ http://docs.angularjs.org/api/angular.copy ），并在那里的Return语句

返回如果指定了目标，则为副本或更新的目标。

Answer 4

工作语法：

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

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

Answer 5

考虑下面的button

• 编辑
• 保存
• 取消

当用户单击编辑和更改数据，然后使用取消button来获取旧数据时，以下是如何实现这一点。

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

我喜欢亚瑟的评论：简洁明了。

我肯定喜欢在开始编辑时复制值，然后在取消/保存时replace参考。

我更喜欢绑定本地副本，而不是原始数据，然后更改保存的最终数据。 这可以防止以后的各种错误，并封装编辑行为。

最终版本将是：

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

但我很惊讶地发现，即使是非范围variables的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); } 

请原谅我，如果没有任何意义..