使用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>

fiddle

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