Question

我将scope变量中的数据存储为

$scope.myData = 
    {
      "firstName": "rocky",
      "lastName": "P",
      "place": "Koraput",
      "education": [
        {
          "id": "764006"
        },
        {
          "id": "764001"
        }
      ],
      "email": "rockyp123@gmail.com",
      "id": "46ads75asda7s6d57ad"
    }

案例：假设我正在更新此数据。我添加了教育，然后点击cancel。如何删除当前添加的关于点击取消的教育并点击edit user检索上述两种教育的数据？

Answer 1

您应该保留两个单独的对象，一个是原始未更改的对象，另一个是用于编辑的对象。一旦用户点击，例如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));
}

Answer 2

您可以使用angular.copy()方法获取原始数组的副本对象，并在取消时仅对其进行引用：

＆＃13;

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
  };
});

＆＃13;

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

＆＃13;

Answer 3

使用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;
      }
    }

  };

Answer 4

您可以复制主对象，取消时可以使用副本

更新主对象

并在保存时使用新对象更新副本

像

$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);
}

Answer 5

我们可以通过使用push和pop来实现这一点，

<强> 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();
   }

比较两个数组并获取数据

5 个答案: