使用 angular.js 重置模型
[英] Reset a model with angular.js
本文介绍了使用 angular.js 重置模型的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我只是尝试像这样重置值:
$scope.initial = [{数据 1: 10,数据 2:20}];$scope.datas= $scope.initial;$scope.reset = function(){$scope.datas = $scope.initial;}
但它没有产生任何东西,有什么解决办法吗?
angular.module('app', []).controller('MyCtrl', function($scope) {$scope.initial = [{数据1:10,数据 2: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="数据中的数据"><input type="text" ng-model="data.data1"/><input type="text" ng-model="data.data2"/>
<a ng-click="reset()">重置为初始值</a>或者<button ng-click="name = initial">重置为初始值</button><小时/><p ng-repeat="data in data">{{data.data1}}, {{data.data2}}</p>
有一个关于 jsfiddle
的工作示例
解决方案
这确实是一个关于 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 中:
{{initial}}
当您更改文本框中的值时,您会看到 $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 = [{数据 1: 10,数据 2:20}];$scope.datas = angular.copy($scope.initial);$scope.reset = 函数 () {$scope.datas = angular.copy($scope.initial);//或者//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="数据中的数据"><input type="text" ng-model="data.data1"/><input type="text" ng-model="data.data2"/>
<a ng-click="reset()">重置为初始值</a>或者<小时/><p ng-repeat="data in datas">{{data.data1}}, {{data.data2}}</p>{{initial}}
小提琴
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屋!