我只是尝试重置这样的值:
$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>
上有一个工作示例
答案 0 :(得分: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提供了部分答案:在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>
答案 1 :(得分:13)
尝试更改reset
功能以使用angular.copy
$scope.reset = function () {
$scope.datas = angular.copy($scope.initial);
};
答案 2 :(得分: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 values
更新$ scope.datas值请参阅angularjs docs(http://docs.angularjs.org/api/angular.copy),以及Return语句中的sektion
如果指定了目标,则返回复制或更新的目标。
答案 3 :(得分:8)
工作语法:
$scope.reset = function () {
angular.copy($scope.initial, $scope.datas);
};
API Reference:angular.copy(source[, destination]);
答案 4 :(得分: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;
};
<强>参考强>
答案 5 :(得分: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();
};
答案 6 :(得分: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);
}
请原谅我,如果它没有任何意义..