How to update ng-repeat values in angular js?

Question

I am new to angular js, I have an array I am looping it through ng-repeat directive, and I have written code for copy, remove, and edit values in the array.

If I want to remove or copy I can do it, done? But if I click on edit one popup box will appear there I want to edit the values those updated values should update in the array.

How can I get it done?

<!doctype html>
<html>
<head>
 <title>Angular app</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
  .listv{
     margin-bottom: 30px;
  }
  .editpopup{
     width: 250px;
     height: 250px;
     border: 1px solid black;
     display: none;
     position: absolute;
     top: 0px;
     left: 0px;
     bottom: 0px;
     right: 0px;

     background-color:gray;
  }
  .editpopup-true{
     display: block;
  }
  .editpopup-false{
     display: none;
  }
  </style>
</head>
 <body ng-app="myApp">
    <div ng-controller="myCon">
     <div ng-repeat="s in items" class="listv">
        <span>{{s.id}}</span>
        <span>{{s.pname}}</span>
        <button ng-click="removeStudent($index)">remove</button>
        <button ng-click="copyrow($index)">copy</button>
        <button ng-click="editrow($index)">edit</button>
     </div></br>

     <div class="editpopup editpopup-{{istrue}} ">
        <p>edit id:<input type="text" ng-model="editedid"></p>
        <p>edit pname:<input type="text" ng-model="editedname"></p>
        <button ng-click="save($index)">save</button>
        <button ng-click="closepopup()">cancel</button>
     </div>

  </div>

      var myApp=angular.module('myApp',[]);
      myApp.controller('myCon',function($scope){
      $scope.items=[{id:1,pname:'box1'},{id:2,pname:'box2'}, {id:3,pname:'box3'}];

    $scope.removeStudent=function($index){
      $scope.items.splice($index,1);
    }
  $scope.copyrow=function($index){

     $scope.len=$scope.items.length;
     $scope.ids=$scope.items[$index].id;
     $scope.pnames=$scope.items[$index].pname

     $scope.items.push({
          id:$scope.len+1,
          pname:$scope.pnames 
      });
  }
  $scope.editrow=function($index){
     $scope.istrue=true;
     $scope.editedid=$scope.items[$index].id;
     $scope.editedname=$scope.items[$index].pname;
  }
  $scope.closepopup=function(){
     $scope.istrue=false;

  }
  $scope.save=function($index){
     $scope.istrue=false;
     $scope.s.name=$scope.editedname;
  }
 });

here is jsfiddle

Wayne Ellery · Accepted Answer · 2018-02-12 02:44:56Z

14

The easiest way is to use angular.copy to create a clone of the object when edit is clicked and then when save is clicked copy the data to the item in the array.

First initilize $scope.editedItem

$scope.editedItem = {};

For editrow we store the currently edited index in $index and then clone the data into $scope.editedItem.

$scope.editrow = function($index){
    $scope.istrue = true;
    $scope.$index = $index;
    angular.copy($scope.items[$index], $scope.editedItem);
}

Then in save we clone the data back into the object in the array:

$scope.save = function(){
    $scope.istrue = false;
    angular.copy($scope.editedItem, $scope.items[$scope.$index]) 
}

The view needs to be updated to instead use editedItem:

<div class="editpopup editpopup-{{istrue}} ">
    <p>edit id:<input type="text" ng-model="editedItem.id"></p>
    <p>edit pname:<input type="text" ng-model="editedItem.pname"></p>
    <button ng-click="save()">save</button>
    <button ng-click="closepopup()">cancel</button>
 </div>

JsFiddle

edited Feb 12, 2018 at 2:44

answered Feb 3, 2015 at 12:02

Wayne Ellery

7,9581 gold badge30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Kermani Over a year ago

It worked well for me, Is there any other possible way? Or maybe in Angular2? Thank you

Jimmy Miller · Accepted Answer · 2015-12-11 00:48:24Z

I had this same issue. here was my fix

My original code that didn't update the object

<div class="info" ng-repeat="email in vm.contactData.emails.other">
      <input type="text" ng-model="email" />
</div>

Used the items $index to properly bind it

<div class="info" ng-repeat="email in vm.contactData.emails.other">
      <input type="text" ng-model="vm.contactData.emails.other[$index]" />
</div>

This binding creates a re-draw issue because it doesn't know if the updated item in the array is referencing the same item that was in that spot before. To fix this i had to make a slight change to formatting of the array.

['[email protected]','[email protected]']

becomes

[
   {'email': '[email protected]'},
   {'email': '[email protected]'}
]

and

<div class="info" ng-repeat="email in vm.contactData.emails.other">
     <input type="text" ng-model="vm.contactData.emails.other[$index]" />
</div>

becomes

<div class="info" ng-repeat="email in vm.contactData.emails.other">
      <input type="text" ng-model="vm.contactData.emails.other[$index].email" />
</div>

after these changes you should have a proper bind without any re-draw issues where the input field loses focus.

Jahongir Rahmonov · Accepted Answer · 2015-02-03 12:06:02Z

0

First, save the old value like this:

$scope.editrow=function($index){
    $scope.istrue=true;
    $scope.oldValue = $scope.items[$index].id; // save the old id
    $scope.editedid=$scope.items[$index].id;
    $scope.editedname=$scope.items[$index].pname;
};

Then, when you save, just find the right object with the help of the old value and assign new values like this:

$scope.save=function($index){
    $scope.istrue=false;
    $scope.items.forEach(function (item) {
       if(item.id == $scope.oldValue){
           item.id = $scope.editedid;
           item.pname = $scope.editedname;
       }
    });
};

JsFiddle

answered Feb 3, 2015 at 12:06

Jahongir Rahmonov

13.8k11 gold badges53 silver badges100 bronze badges

Comments

S.Elavarasan · Accepted Answer · 2017-04-21 05:34:21Z

0

First declare the variable $scope.getIndex=0; and get the index from items array when you click save button. Then assign $index to that variable.

Now you can get items[$scope.getIndex] anywhere in controller. And help you to update items array:

$scope.getIndex=0;
$scope.editrow=function($index){
     $scope.getIndex=$index;
     $scope.istrue=true;
     $scope.editedid=$scope.items[$index].id;
     $scope.editedname=$scope.items[$index].pname;
}

$scope.save=function($index){
    $scope.istrue=false;
    $scope.items[$scope.getIndex].id=$scope.editedid;
    $scope.items[$scope.getIndex].pname=$scope.editedname;
}[enter link description here][1]

JSFiddle

edited Apr 21, 2017 at 5:34

answered Apr 20, 2017 at 12:35

S.Elavarasan

837 bronze badges

Collectives™ on Stack Overflow

How to update ng-repeat values in angular js?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related