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 引用的对象的 data1 和 data2 元素——即 $scope.initial。要查看实际情况，请将以下内容添加到小提琴的 HTML 中：

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

当您更改文本框中的值时，您会看到 $scope.initial 也在发生变化。

@Max 提供了部分答案：在重置函数中使用 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 回答
11

@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 文档（http://docs.angularjs.org/api/angular.copy），以及 Return 语句中的 sektion

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

于 2013-08-13T19:16:37.003 回答
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

正如大家所说的那样，我通过维护备份来使用它，但是在使用它时我又遇到了一个问题。
我想如果我在这里发布它会对其他人有所帮助

我的个人资料部分代码如下：

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 回答