CODEWITHSUNDEEP
javascripthtmlangularjs
Ranvijay
Ranvijay

Reputation: 51

Update table row data in Angular

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>

Upvotes: 3

Views: 10648

Answers (2)

micronyks
micronyks

Reputation: 55453

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

Upvotes: 1

Paresh Gami
Paresh Gami

Reputation: 4792

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>

Upvotes: 1

Related Questions