How to add Data to Specific index of json array using angularjs

Question

I was created table data and edit button and i am getting problem when i was trying to add edit data to specific row.

Here my plunkr :- http://plnkr.co/edit/QKz7nu458i8Il4OLmAyw?p=preview

Here HTML page

    <table class="table table-bordered">
                <thead>
                    <tr>
                        <th><input type='checkbox' ng-modal='isall' ng-click='selectallrows()'></th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>EDIT</th>

                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat='p in person' ng-class="{'success':tableselection[$index]}">
                        <td><input type='checkbox' ng-model='tableselection[$index]'></td>
                        <td>{{p.id}}</td>
                        <td>{{p.name}}</td>
                        <td><button class='btn btn-primary' ng-click='edit(p.id)'><span class="glyphicon glyphicon-pencil"></span>Edit</button></td>
                    </tr>
                </tbody>

            </table>
<div ng-show='editabledata'>
      <form role='form' class='form-horizontal'>

        <div class='form-group'>
      <label>Id :-</label>
      <input type='text' ng-model='pid' class='from-group col-sm-2'></div>
      <div class='form-group'>
      <label>Name:-</label>
      <input type='text' ng-model='pname' class='from-group col-sm-2'>
      </div>
      <button class='btn btn-primary' ng-click='saveeditdata(pid)'>Save</button>
      <button clas='btn btn-primary' ng-click='canceleditdata()'>Cancel</button>
      </form>
    </div>

Here my .js

$scope.person=[
        {id:1,name:'devendher'},
        {id:2,name:'Macha'},
        {id:3,name:'Macha devendher'}
        ];

    $scope.editabledata=false;
  $scope.edit=function(id){
    $scope.editabledata=true;

   for(i=0;i<$scope.person.length;i++){

     if($scope.person[i].id==id)
   {
     $scope.pid=$scope.person[i].id;
     $scope.pname=$scope.person[i].name;
   }

   }
  }


  $scope.saveeditdata=function(id){
    for(i=0;i<$scope.person.length;i++){
      if($scope.person[i].id==id){
        $scope.person[i].push({'id':$scope.pid,'name':$scope.pname})
      }
    }


  }

i got error " $scope.person[i].push " is not a function Is there any alternate way to add data to specific index of array?

Answer 1

I think you mean:

$scope.person.push({...})

Or

$scope.person[i] = {...}

Answer 2

This is very over complicated and you aren't taking advantage of using a single object for the form data. In addition you are using different property names for the editing vs original object. All the loops you are doing are unnecessary

Much simpler steps:

To edit object, pass whole object to controller function :

  <button  ng-click='edit(p)'>

In controller make copy of object and store reference to the selected one to update later

$scope.edit=function(person){ 
   $scope.editabledata = true;
   $scope.selectedItem = person;
   $scope.editItem = angular.copy(person);
}

In edit form use full object reference in ng-model. No need to create individual variables, use the properties that already exist

ID :  <input ng-model="editItem.id">
Name: <input ng-model="editItem.name">

In the save function extend the original object with the updated one

$scope.saveeditdata=function(){
   // merge updates
   angular.extend($scope.selectedItem , $scope.editItem);
   // reset
   $scope.editabledata = false;
   $scope.editItem = {};

}

For delete see : How do I delete an item or object from an array using ng-click?

DEMO