0

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

SrinivasAppQube
  • 291
  • 1
  • 4
  • 22

3 Answers3

2

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,

Chathura Hettiarachchi
  • 131
  • 7
0

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.

Icycool
  • 7,099
  • 1
  • 25
  • 33
  • Thank you for your Response. i knew this. i don't want to write the button on . with out writing the button in table how to generate the button. – SrinivasAppQube May 05 '16 at 05:00
  • @SrinivasAppQube What is your reason for that? If you want something to appear in HTML the best way would be writing it in the view. – Icycool May 05 '16 at 05:02
  • in my restaurant pos project after completion of order edit button will not appear in the table. if customer order not completed clerk will edit the order and will show the edit button in table – SrinivasAppQube May 05 '16 at 05:11
  • @SrinivasAppQube Would `ng-show` on the button achieve your requirement? – Icycool May 05 '16 at 05:13
  • i try this also but it hiding every edit button in the table. ng-hide/ng-show. Any way Thanks for your discussion. – SrinivasAppQube May 05 '16 at 05:16
  • @SrinivasAppQube You'll need a criteria to specify when you want to show/hide the button, for instance a completed flag in your restaurant example. – Icycool May 05 '16 at 05:19
0

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.

vipin Bhandari
  • 192
  • 7