Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to update ng-repeat values in angular js?

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

like image 851
Pioter Avatar asked Feb 03 '15 11:02

Pioter


1 Answers

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

like image 196
Wayne Ellery Avatar answered Oct 30 '22 17:10

Wayne Ellery