Angular js:ng-模型覆盖了 ng-repeat 中的项目

Question

我的 ng-repeat 数组有一个奇怪的问题。

目前，我正在使用 ng-repeat 列出一个数组，并放置了一个编辑按钮来编辑特定项目并保存到数据库。

但问题是当文本框中的特定 item 更改时，ng-repeat 项也会更改。

这是我的问题 fiddle

https://plnkr.co/edit/D5NQitsRg7sCfZBE9IaB?p=preview

更改文本字段中的值它也会影响 ng-repeat

中的值

Answer 1

您正在分配变量的引用，这就是它发生变化的原因。你必须复制变量。下面是工作示例：-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  
  $scope.items= [
       {id:1,name:'first'},{id:2,name:'second'}
    ];
    
    $scope.editItem = function(index){
    //edit
      $scope.edit = angular.copy($scope.items[index]);
      
    }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
  <p ng-repeat="item in items">{{item.id+','+item.name}}
  
  <span ng-click="editItem($index)">Click to Edit {{item.name}} item</span>
  </p>
  
  
  <h2>Edit</h2>
   <input type="text" ng-model="edit.name" />
</div>

Angular js:ng-模型覆盖了 ng-repeat 中的项目

Angular js:ng-model is over writing the items in the ng-repeat

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-model