javascript - Angular 编辑副本的副本

Question

我在编辑副本的副本时遇到一些问题。

当您第一次编辑一条记录时，它会被分配给一个$scope.original，并获取一个副本进行编辑并存储在$scope.copy中，该副本可以更改并保存回 $scope.original，进而正确更新 $scope.something。

问题是在编辑第一条记录时，如果您随后获取其中一个值的副本以进行进一步编辑，则在调用 $scope.saveSomething() 函数时它不会更新.

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

  $scope.Something = [{
    name: "Aye",
    desc: new Date()
  }, {
    name: "Bee",
    desc: new Date()
  }, {
    name: "See",
    desc: new Date()
  }];

  //=================== First copy

  $scope.edit = function(what) {
    $scope.original = what;
    $scope.copy = angular.copy(what);
  }

  $scope.save = function(copy) {
    angular.copy($scope.copy, $scope.original);
    $scope.cancel();
  }

  $scope.cancel = function() {
    $scope.copy = null;
  }

  //=================== Second copy

  $scope.editName = function(what) {
    $scope.originalName = what;
    $scope.copyName = angular.copy(what);
  }

  $scope.saveName = function() {
    angular.copy($scope.copyName, $scope.originalName);
    $scope.cancelName();
  }

  $scope.cancelName = function() {
    $scope.copyName = null;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="s in Something">
      <pre>{{s | json}}</pre>
      <a ng-click='edit(s)'>edit</a>
      <br/>
      <br/>
    </div>

    <input type='text' ng-model='copy.name' />
    <input type='text' ng-model='copy.desc' />
    <br/>
    <button ng-click='save(copy)' ng-disabled="!copy">save</button>
    <button ng-click='cancel()' ng-disabled="!copy">cancel</button>
    <a ng-click='editName(copy.name)'>edit name</a>
    <br>
    <br>
    <input type='text' ng-model='copyName' />
    <br>
    <button ng-click='saveName()' ng-disabled="!originalName">saveName</button>
    <button ng-click='cancelName()' ng-disabled="!originalName">cancelName</button>
  </div>
</div>

我对 Angular 还很陌生，并且已经在这个问题上摸不着头脑有一段时间了，有什么想法吗？

编辑

更新了代码以提供更好的示例，第一个版本建议您可能知道您正在编辑的第一个编辑值中的哪个值，并且 scraplz 发布的解决方案 ( http://jsfiddle.net/Karl33to/w23ppp9r/ ) 只是在第二个保存中直接设置该值函数，但我需要能够对第一次编辑加载的任何值进行第二次编辑。

还创建了一个 fiddle ，如果这对您来说更容易运行/ fork http://jsfiddle.net/w23ppp9r/2/

Answer 1

您的问题是由于您使用 angular.copy 引起的。在 $scope.saveName 中，您的目标 $scope.originalName 是一个字符串，这将导致 Angular 抛出错误。

如果您正在使用基元，实际上根本没有理由使用angular.copy。相反，您可以在此处使用以下内容:

$scope.editName = function(what) {
  $scope.originalName = what;
  $scope.copyName = what;
};

$scope.saveName = function() {
  $scope.copy.name = $scope.copyName;
  $scope.cancelName();
}