用angular.js重置一个模型

I'm simply try to reset values like this :

我只是尝试重置如下值:

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


$scope.datas= $scope.initial;


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

But it doesn't produce anything, any idea to fix it ?

但是它并没有产生任何东西，有办法修复它吗?

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>

There is a working example on jsfiddle

有一个关于jsfiddle的工作示例

7 个解决方案

#1

This is really a question about JavaScript (so I added the "javascript" tag). When a JavaScript object (such as array $scope.initial) is assigned to a variable, it is assigned by reference, not by copy. So, this statement

这确实是一个关于JavaScript的问题(因此我添加了“JavaScript”标记)。当一个JavaScript对象(如数组$scope.initial)被分配给一个变量时，它是通过引用而不是复制来分配的。所以,这句话

$scope.datas= $scope.initial;

results in $scope.datas pointing to the $scope.initial object. Any changes that are made to $scope.datas or $scope.initial both affect the same (single) object. Since ng-model is used to data-bind object elements data1 and data2, any changes to the text inputs will change the data1 and data2 elements of the object that $scope.datas references -- i.e., $scope.initial. To see this in action, add the following to your fiddle's HTML:

导致美元范围。指向$范围的数据。最初的对象。对$范围所做的任何更改。数据或美元范围。初始化都影响相同(单个)对象。由于ng-model用于数据绑定对象元素data1和data2，对文本输入的任何更改都将更改$作用域对象的data1和data2元素。——即数据引用。,scope.initial美元。要查看这个操作，请将以下内容添加到小提琴的HTML中:

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

When you change the values in the text boxes, you'll see that $scope.initial is also changing.

当您更改文本框中的值时，您将看到$scope。最初也发生变化。

@Max provided a partial answer: use angular.copy() in the reset function. However, you'll also have to use angular.copy() in the initial assignment too:

@Max提供了部分答案:在重置函数中使用angular.copy()。但是，您还必须在初始作业中使用angular.copy():

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

Update:

更新:

As @EpokK shows in his answer, an alternate solution is

正如@EpokK在他的回答中所示，另一种解决方案是

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

As @bekite mentions in his answer, @EpokK's solution does not create another object.

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

The full code

完整的代码

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

小提琴

#2

Try changing the reset function to use angular.copy

尝试更改重置功能，使用角度。复制

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

#3

@Mark Rajcok: Don't get me wrong, but I think that

@Mark Rajcok:别误会我的意思，但我是这么想的

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

is not an alternate syntax for

难道不是另一种语法吗

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

The way i understand it:

我的理解是:

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

Creates a copy of $scope.initial and assigns the reference to $scope.datas.

创建一个$scope的副本。初始化并将引用赋给$scope.datas。

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

Updates $scope.datas values with $scope.initial values

更新美元范围。元数据值和范围。初始值

See the angularjs docs ( http://docs.angularjs.org/api/angular.copy ),and there the sektion on the Return statement

参见angularjs文档(http://docs.angularjs.org/api/angular.copy)，返回语句中有sektion

Returns The copy or updated destination, if destination was specified.

如果指定了目的地，则返回复制或更新的目的地。

#4

Working syntax :

工作的语法:

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

API Reference : angular.copy(source[, destination]);

API参考:角。(源[目的])复印件;

#5

Consider the following buttons

考虑下面的按钮

Edit
编辑
Save
保存
Cancel
取消

When user clicks edit and changes data and then uses the cancel button to get the old data, here is how you could implement this.

当用户单击edit并更改数据，然后使用cancel按钮获取旧数据时，您可以实现以下操作。

HTML

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

AngularJs

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

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

References

引用

angular.copy
angular.copy
Orignal Post
及后

#6

I love Yasser's comment: clear and concise.

我喜欢Yasser的评论:简洁明了。

I definitely prefer copying the value when starting to edit, and then just replacing the reference on cancel/save.

我肯定更喜欢在开始编辑时复制值，然后在cancel/save上替换引用。

I prefer binding on a local copy, and not the original data, and then changing the final data only on save. This prevent all sorts of bugs later, and encapsulates the edit behavior.

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

The final version would be:

最后的版本将是:

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

#7

I have used as you all said above by maintaining a back up but while using it I faced one more problem.
I thought if i post it here it would be helpful to others

就像你们上面说的，我使用了一个备份，但是在使用它的时候，我又遇到了一个问题。我想如果我把它贴在这里，对别人会有帮助

I have profile section code as below:

我的配置文件代码如下:

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

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

But I was surprised to see that even non-scope variable profileBackup was updating when the model changes (I guess reference is returned in this case)

但是，我很惊讶地看到，即使是非范围变量profileBackup在模型更改时也会更新(我想在这种情况下会返回引用)

Then I changed my code like this:

然后我改变了我的代码如下:

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

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

please forgive me if it doesn't make any sense..

如果这事毫无意义，请原谅。

#1

$scope.datas= $scope.initial;

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