Jabaa Jabaa - 3 years ago 94
AngularJS Question

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

I have a strange problem with my ng-repeat array.

Currently, I am listing an array using

and an edit button is placed to edit the particular item and save to the database.

But the problem is when the particular
in the text box is changed the
items are also changed.

Here is the fiddle of my issue


Change the value in textfield it will also affect the values in

Answer Source

you are assigning the reference of the variable that's why its changing. you have to copy the variable. below is working example:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.items= [
    $scope.editItem = function(index){
      $scope.edit = angular.copy($scope.items[index]);
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<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>
   <input type="text" ng-model="edit.name" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download