CODEWITHSUNDEEP
htmlangularjs
SrinivasAppQube
SrinivasAppQube

Reputation: 301

how to create a Edit button on table after saving?

i create a plunker and it having the table and consist of two fields name and age are saving from the form. After saving the data Edit button will generated dynamically on each table row.

<script>
    var app = angular.module('plunker', []);
    app.controller('MainCtrl', function ($scope) {
      $scope.data=[]
       $scope.save=function(form){
         $scope.data.push(form)
         $scope.form={}
    });
</script>
<body ng-controller="MainCtrl">
 <hr>
<div class="row">
<div class="col-md-5 col-lg-5">
 <form>
 <input type="text" class="form-control" ng-model="form.name"><br>
 <input type="text" class="form-control" ng-model="form.age"><br>
 <button type="button" ng-click="save(form)">save</button>
 </form>
 </div>
 </div>
 <table class="table striped">
   <tr>
   <th>name</th>
   <th>age</th>
   </tr>
   <tr ng-repeat="item in data">
     <td>{{item.name}}</td>
     <td>{{item.age}}</td>
   </tr>
 </table>

https://plnkr.co/edit/vBrPlOAitIAALKcbT3Q8?p=preview

please help me how to do this

Upvotes: 0

Views: 1591

Answers (3)

vipin Bhandari
vipin Bhandari

Reputation: 192

Try This

    <script>
        var app = angular.module('plunker', []);
        app.controller('MainCtrl', function ($scope) {
          $scope.data=[]
           $scope.save=function(form){
             $scope.data.push(form)
             $scope.form={}
$scope.edit=function(item){
alert(item)
}
        });
    </script>
    <body ng-controller="MainCtrl">
     <hr>
    <div class="row">
    <div class="col-md-5 col-lg-5">
     <form>
     <input type="text" class="form-control" ng-model="form.name"><br>
     <input type="text" class="form-control" ng-model="form.age"><br>
     <button type="button" ng-click="save(form)">save</button>
     </form>
     </div>
     </div>
     <table class="table striped">
       <tr>
       <th>name</th>
       <th>age</th>
       </tr>
       <tr ng-repeat="item in data">
         <td>{{item.name}}</td>
         <td>{{item.age}}</td>
   <td><button type='button' ng-click='edit(item)'>Edit</button></button></td>
       </tr>
     </table>

Or do you want to make the label textbox after click on edit.

Upvotes: 0

Chathura Hettiarachchi
Chathura Hettiarachchi

Reputation: 131

It's very Simple 

 <script>
        var app = angular.module('plunker', []);
        app.controller('MainCtrl', function ($scope) {
          $scope.data=[]
           $scope.save=function(form){
             $scope.data.push(form)
             $scope.form={}
          }

      $scope.edit=function(obj){
         // here your edit function
        }
    });

</script>

 <tr ng-repeat="item in data">
     <td>{{item.name}}</td>
     <td>{{item.age}}</td>
     <td><button ng-if="item.approve" ng-click="edit(item)">Edit</item></td>
   </tr>

here you can achieve the requirement by using ng-if directive,

Upvotes: 2

Icycool
Icycool

Reputation: 7179

You can just add the button in the generated rows

<tr ng-repeat="item in data">
     <td>{{item.name}}</td>
     <td>{{item.age}}</td>
     <td><button type='button' ng-click="edit(item)">Edit</button></td>
</tr>

Now the new question would be how to let your user edit the data after clicking the button. Do you turn the text into editable fields? Or do you populate the data back to the form on top? These would be out of the scope of this question.

Upvotes: 0

Related Questions