[英]comparing two arrays and getting the data as it was
I am storing data like this in scope
variable as 我将这样的数据存储在scope
变量中
$scope.myData =
{
"firstName": "rocky",
"lastName": "P",
"place": "Koraput",
"education": [
{
"id": "764006"
},
{
"id": "764001"
}
],
"email": "rockyp123@gmail.com",
"id": "46ads75asda7s6d57ad"
}
Case: Suppose I am updating this data. 案例:假设我正在更新此数据。 I added education to it and then i click cancel
. 我添加了教育,然后单击“ cancel
。 How to remove the currently added education on click on cancel and retrieve the data that is only two education as mentioned above on click of edit user
? 如何在单击“取消”时删除当前添加的教育,并在单击“ edit user
检索仅上述两个教育的数据?
You should keep two separate objects, one that is the original, unchanged object, and the other that is used for editing. 您应该保留两个单独的对象,一个是原始的,未更改的对象,另一个是用于编辑的对象。 Once the user clicks, say save
, only then should you overwrite the first object with the second. 用户单击后,说出save
,然后才应该用第二个覆盖第一个对象。 Once you click cancel
, you can simply revert the value of the editable object back to a clone of the original data. 单击cancel
,您可以简单地将可编辑对象的值还原为原始数据的克隆。
You'd start off by cloning the first object into a new, second object: 首先将第一个对象克隆到新的第二个对象中:
// Your original data (unchanged)
$scope.myData = { /* ... */ };
// Your object for editing purposes
$scope.myDataClone = clone($scope.myData);
$scope.cancel = function() {
// reset the 'editable' clone to the unchanged value of myData
$scope.myDataClone = clone($scope.myData);
}
$scope.save = function() {
// Once the user accepts their changes, you can simply
// set the value of myData to a clone of the edited data.
// This will ensure you are not just creating a new pointer
// from myData to myDataClone, which would cause myData
// to change if you make subsequent requests to myDataClone.
$scope.myData = clone($scope.myDataClone);
}
// A clone function which takes an object and returns an exact
// replica as a new object with a unique memory reference
function clone(obj) {
return JSON.parse(JSON.stringify(obj));
}
You can use angular.copy()
method to have a copy object of original array and just make a reference to it when you cancel : 您可以使用angular.copy()
方法来获取原始数组的副本对象,并在取消时对其进行引用:
var app = angular.module('demoApp', []); app.controller('demoCtrl', function($scope) { $scope.myData = { "firstName": "rocky", "lastName": "P", "place": "Koraput", "education": [{ "id": "764006" }, { "id": "764001" }], "email": "rockyp123@gmail.com", "id": "46ads75asda7s6d57ad" }; $scope.copy = angular.copy($scope.myData.education); $scope.onAdd = function() { $scope.myData.education.push({ id: $scope.myData.education.length }); }; $scope.onCancel = function() { $scope.myData.education = $scope.copy; // <----reset to original }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> <div ng-app="demoApp" ng-controller="demoCtrl"> <pre>{{myData.education}}</pre> <button ng-click="onAdd()">+</button> <button ng-click="onCancel()">X</button> </div>
Remove using id 使用ID删除
$scope.myData =
{
"firstName": "rocky",
"lastName": "P",
"place": "Koraput",
"education": [
{
"id": "764006"
},
{
"id": "764001"
}
],
"email": "rockyp123@gmail.com",
"id": "46ads75asda7s6d57ad"
};
//Remove specific item
$scope.onCancel = function(cancelId){
for(var i in $scope.myData.education){
if($scope.myData.education[i].id==cancelId){
$scope.myData.education.splice(i, 1);;
break;
}
}
};
You can make a copy of the main object and while cancel you can update the main object with the copy 您可以创建主要对象的副本,而在取消时可以使用副本更新主要对象
and while saving update the copy with new object 并且在保存时用新对象更新副本
like 喜欢
$scope.myData =
{
"firstName": "rocky",
"lastName": "P",
"place": "Koraput",
"education": [
{
"id": "764006"
},
{
"id": "764001"
}
],
"email": "rockyp123@gmail.com",
"id": "46ads75asda7s6d57ad"
};
$scope.copymyData = angular.copy($scope.myData);
$scope.cancel = function(){
$scope.myData = angular.copy($scope.copymyData);
}
$scope.save = function(){
$scope.copymyData = angular.copy($scope.myData);
}
We can achieve this by using push and pop, 我们可以通过使用推入和弹出来实现这一点,
HTML: HTML:
<button ng-click="cancel()">cancel</button>
Controller: 控制器:
$scope.myData =[];
$scope.myData = [
{
"firstName": "rocky",
"lastName": "P",
"education":'MBA',
"place": "Koraput",
"email": "rockyp123@gmail.com",
"id": "46ads75asda7s6d57ad"
}];
$scope.myData.push({
education : 'BE'
})
$scope.cancel = function(){
var lastElement = $scope.myData.pop();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.