Question

这是我的plnkr http://plnkr.co/edit/0W1SZll1BOK5uuEtdycy?p=preview

我试图从编辑联系人模式中保存已编辑的值。

这是一个从对象获取当前值的编辑方法：

$scope.edit = function(terminal) {
$scope.name = terminal.name;
$scope.last = terminal.last;
$scope.age = terminal.age;
}

我读到有关角度复制的内容，还有什么？任何人都可以帮助我，请不要学习如何做到这一点

Answer 1

在将对象或数组的值赋给另一个变量时使用angular.copy，并且不应更改该对象值。

如果没有深层复制或使用angular.copy，更改属性值或添加任何新属性会更新引用该同一对象的所有对象。你的JS看起来像这样：

$scope.edit = function(terminal) {
    $scope.name = angular.copy(terminal.name);
    $scope.last = angular.copy(terminal.last);
    $scope.age = angular.copy(terminal.age);
    }

Answer 2

您需要传递要编辑的行的索引。单击编辑按钮时传递索引。

更改script.js

$scope.edit = function(terminal,index) {

    $scope.name = terminal.name;
    $scope.last = terminal.last;
    $scope.age = terminal.age;
    $scope.edit_index = index

 }


$scope.saveEdit =function(){
    index = $scope.edit_index
    $scope.terminals[index].name = $scope.name;

  }

index.html中的更改

<td> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModalLong" ng-click="edit(terminal,$index)">Edit</button>

<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="saveEdit()">Save</button>

http://plnkr.co/edit/GpVB2dUiHCY6NslQDuBe?p=preview

Answer 3

您首先在ng-model中不使用一个对象而不是使用单个范围属性，从而创建了大量额外的手动工作。

if you don't have a dot in ng-model you are doing it wrong

还有一条黄金法则

做类似的事情：

<input ng-model="terminal.name">
<input ng-model="terminal.age">

然后按照以下方针行事：

$scope.edit = function(terminal) {
    // store reference to terminal being edited
    $scope.currentTerminal = terminal;
    // make a copy so live one is not affected -- will be used in form
    $scope.terminal = angular.copy(terminal);
}

$scope.save = function(){
  // update stored original with changes
  angular.extend($scope.currentTerminal,  $scope.terminal);
  // reset terminal used in form
  $scope.terminal ={};
}

我强烈建议你摆脱jQuery和bootstrap.js并使用angular-ui-bootstrap insted

Angular：如何保存已编辑的值？

3 个答案: