重置与angular.js模型 [英] Reset a model with angular.js

问题描述

我只是尝试重置这样的值：

  $ scope.initial = [
    {
        DATA1：10，
        数据2：20
    }
];
$ scope.datas = $ scope.initial;
$ scope.reset =功能（）{
  $ scope.datas = $ scope.initial;
}
 

不过，这并不生产任何东西，任何想法解决它？

\r

\r

angular.module（应用，[]）。控制器（'MyCtrl ，功能（$范围）{\r
  $ scope.initial = [\r
    {\r
      DATA1：10，\r
      数据2：20\r
    }\r
  ];\r
\r
  $ scope.datas = $ scope.initial;\r
\r
  $ scope.reset =功能（）{\r
    $ scope.datas = $ scope.initial;\r
  }\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序NG控制器=MyCtrl＆GT;\r
  ＆LT; D​​IV NG重复=数据DATAS＆GT;\r
    ＆LT;输入类型=文本NG模型=data.data1/＆GT;\r
    ＆LT;输入类型=文本NG模型=data.data2/＆GT;\r
  ＆LT; / DIV＆GT;\r
  ＆LT;一个NG点击=reset（）的＆GT;重置为初始值＆LT; / A＆GT;\r
  要么\r
  ＆LT;按钮NG点击=NAME =初始＆GT;重置为初始值＆LT; /按钮＆GT;\r
  ＆LT;小时/＆GT;\r
  ＆下，P纳克重复=数据中DATAS＆GT; {{data.data1}}，{{data.data2}}＆下; / P＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

有是一个工作的例子的jsfiddle

解决方案

这是真正关于JavaScript的（所以我添加了JavaScript的标签）的问题。当JavaScript对象（如数组$ scope.initial）被分配给一个变​​量，它是由基准分配，而不是由副本。所以，这种说法

  $ scope.datas = $ scope.initial;
 

结果$ scope.datas指向$ scope.initial对象。正在为$ scope.datas或$所作的任何更改都scope.initial影响相同（单一）对象。由于NG-模型用于数据绑定对象元素data1和data2的，对文本输入的任何变化都会改变的对象，$ scope.datas引用的data1和data2的元素 - 即$ scope.initial。要看到这个动作，以下内容添加到您的提琴的HTML：

 ＆LT; P＆GT; {{初始}}＆LT; / P＆GT;
 

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

@Max提供了部分答案：在复位功能使用angular.copy（）。不过，你还必须在初始分配使用angular.copy（）也：

  $ scope.datas = angular.copy（$ scope.initial）;
 

---

更新：

由于@EpokK显示了他的答案，另一种解决方案是

  angular.copy（$ scope.initial，$ scope.datas）;
 

由于@bekite提到了他的答案，@ EpokK的解决方案不会创建另一个对象。

满code

\r

\r

angular.module（应用，[]）。控制器（'MyCtrl ，功能（$范围）{\r
  $ scope.initial = [{\r
    DATA1：10，\r
    数据2：20\r
  }];\r
  $ scope.datas = angular.copy（$ scope.initial）;\r
  $ scope.reset =功能（）{\r
    $ scope.datas = angular.copy（$ scope.initial）;\r
    // 要么\r
    // angular.copy（$ scope.initial，$ scope.datas）;\r
  }\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
＆LT; D​​IV NG-应用=应用程序NG控制器=MyCtrl＆GT;\r
  ＆LT; D​​IV NG重复=数据DATAS＆GT;\r
    ＆LT;输入类型=文本NG模型=data.data1/＆GT;\r
    ＆LT;输入类型=文本NG模型=data.data2/＆GT;\r
  ＆LT; / DIV＆GT;\r
  ＆LT;一个NG点击=reset（）的＆GT;重置为初始值＆LT; / A＆GT;\r
  要么\r
  ＆LT;小时/＆GT;\r
  ＆下，P纳克重复=数据中DATAS＆GT; {{data.data1}}，{{data.data2}}＆下; / P＆GT; {{初始}}\r
＆LT; / DIV＆GT;

\r

\r

\r

<大骨节病> 小提琴

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

解决方案

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

$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:

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

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

@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:

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

---

Update:

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

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

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

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

这篇关于重置与angular.js模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！