Update table row data in Angular

Question

Hello I am learning angular, i need help over a functionality, i have a dynamic table and a form, when i click on a any row of the dynamic table that data should populate in the input boxes of form and when i edit and save the data in input boxes that should reflect with changes on the same. `

 $scope.Save= function($index){
    		
    		 var user1= angular.copy($scope.displayData[$index]);
    		 fc.saveData.push(user1);
    		 console.log(fc.saveData.name);
    }}

 
<head>
    <script src="https://code.angularjs.org/1.4.9/angular.js"></script>
</head>
<table class="table2">
    <tr>
        <th>Player</th>
        <th>Age</th>
        <th>Ranking</th>

    </tr>
    <tr ng-repeat=" usr in saveData" ng-click="fnClick(usr)">
        <td>{{$index}}</td>
        <td>{{::usr.player}}</td>
        <td>{{::usr.age}}</td>
        <td ng-bind="::usr.ranking"></td>
    </tr>
</table>` and my input boxes code is here `
<div>
    <button class="btn" ng-click="Savedata()">Saveintable</button>
    <label for="field1">
    	<span>Name</span><input type="text" name="" required="true" ng-model="displayData.name"/>
    	</label>
    <label for="field2">
    	<span>Age</span><input type="text"  required="true" ng-model="displayData.age"/>
    	</label>
    <label>
    	<span>Ranking</span><input type="text" ame="" required="true" ng-model="displayData.ranking"/>
    	</label>

    </label>
</div>

micronyks · Accepted Answer · 2016-02-20 04:59:34Z

var app=angular.module("myApp",[]);

app.controller("startCtrl",function($scope){

     $scope.saveData=[{
     player:"John",
     age:"24",
     ranking:'1' 
     },
     {
     player:"John1",
     age:"25",
     ranking:'2'
     },
     {
     player:"John3",
     age:"26",
     ranking:'3'
     }];


     $scope.fnClick=function(usr,index)
{ 

      $scope.formData=angular.copy($scope.saveData[index]);   //usr object will be assigned to $scope.formData...
     $scope.formData.index=index;
     console.log($scope.formData);
}

 $scope.SaveDataFun= function(formData){
           console.log('save data');
            var index$=formData.index;
            console.log(index$);
             // now I assume that displayData is a list of objects.

           angular.forEach($scope.saveData,function(data,index){
                   console.log(index +' '+ index$);
                   if(index==index$) // this will match your ediated row index$ to displayData objects row index.
                   { console.log('if')
                         console.log(data);
                         $scope.saveData.splice(index,1);
                         $scope.saveData.splice(index,0,formData);

                                             console.log(formData);
                         $scope.formData={};

                                    }
                    });
       }

});

I had posted answer but not knowing about your problem. Played with it and again posting answer. Hope this will help you.

Demo

Paresh Gami · Accepted Answer · 2016-02-20 03:28:28Z

1

Try this super simple snippet...

    <!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>

</head>

<body ng-controller="MainCtrl">

<div class="container">
    <div class="row">
        <table class="table">
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Age</th>
                <th>Ranking</th>
                <th>Edit</th>
            </tr>
            <tr ng-repeat="usr in tableData">
                <td>{{$index+1}}</td>
                <td>{{usr.name}}</td>
                <td>{{usr.age}}</td>
                <td>{{usr.ranking}}</td>
                <td><button ng-click="edit($index)">Edit</button></td>
            </tr>
        </table>
    </div>
</div>

    <hr>

    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <form>
                    <div class="form-group">
                        <label>Name : </label>
                        <input type="text" name="" ng-model="displayData.name" class="form-control"/>        
                    </div>

                    <div class="form-group">
                        <label>Age : </label>

                        <input type="text" ng-model="displayData.age" class="form-control"/>

                    </div>

                    <div class="form-group">
                        <label>Ranking : </label>
                        <input type="text" ng-model="displayData.ranking" class="form-control"/>        
                    </div>

                    <button class="btn" ng-click="Savedata(index)">Save in table</button>
                </form>      
            </div>            
        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    var app = angular.module('plunker', []);
    app.controller('MainCtrl', function($scope) 
    {
        $scope.index = -1;
        $scope.displayData = [];
        $scope.tableData = 
                        [
                            {name:'paresh',age:20,ranking:2},
                            {name:'gami',age:25,ranking:1},
                        ]
        $scope.Savedata = function(index)
        {
            if(index==-1)
            {
                //add
                $scope.tableData.push($scope.displayData);
                $scope.displayData=[];
                $scope.index = -1; 

            }
            else
            {
                $scope.tableData[index] = $scope.displayData;
                $scope.displayData=[];
                $scope.index = -1;

            }
        }

        $scope.edit = function(index)
        {
            console.log(index);

            $scope.index = index;

            $scope.displayData['name'] = $scope.tableData[index]['name'],

            $scope.displayData['age'] = $scope.tableData[index]['age'],

            $scope.displayData['ranking'] = $scope.tableData[index]['ranking'];
        }
    });
</script>

edited Feb 20, 2016 at 3:28

answered Feb 20, 2016 at 3:00

Paresh Gami

4,7926 gold badges28 silver badges44 bronze badges

4 Comments

Ranvijay Over a year ago

Thanks Paresh but the thing is with out actually clicking the saveintable button the data in table is changing due to two way data binding. That is the same problem i am facing. so the data in table should change only after button action. and instead of edit button i expect to click on the row and row data should populate in the input fields

Saksham Over a year ago

Do not use $index. A common mistake beginners do

Paresh Gami Over a year ago

@Saksham Thanks but any reason behind that?

Saksham Over a year ago

google has a lot of answers. specifically it causes error if the scope changes.

Collectives™ on Stack Overflow

Update table row data in Angular

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related