[英]comparing two arrays and getting the data as it was
我將這樣的數據存儲在scope
變量中
$scope.myData =
{
"firstName": "rocky",
"lastName": "P",
"place": "Koraput",
"education": [
{
"id": "764006"
},
{
"id": "764001"
}
],
"email": "rockyp123@gmail.com",
"id": "46ads75asda7s6d57ad"
}
案例:假設我正在更新此數據。 我添加了教育,然后單擊“ cancel
。 如何在單擊“取消”時刪除當前添加的教育,並在單擊“ edit user
檢索僅上述兩個教育的數據?
您應該保留兩個單獨的對象,一個是原始的,未更改的對象,另一個是用於編輯的對象。 用戶單擊后,說出save
,然后才應該用第二個覆蓋第一個對象。 單擊cancel
,您可以簡單地將可編輯對象的值還原為原始數據的克隆。
首先將第一個對象克隆到新的第二個對象中:
// 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));
}
您可以使用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>
使用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;
}
}
};
您可以創建主要對象的副本,而在取消時可以使用副本更新主要對象
並且在保存時用新對象更新副本
喜歡
$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);
}
我們可以通過使用推入和彈出來實現這一點,
HTML:
<button ng-click="cancel()">cancel</button>
控制器:
$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.