保存后如何在表格上创建编辑按钮？答案

【问题标题】：how to create a Edit button on table after saving?保存后如何在表格上创建编辑按钮？
【发布时间】：2016-05-05 14:53:52
【问题描述】：

我创建了一个 plunker，它具有表格并由两个字段组成，名称和年龄正在从表单中保存。保存数据后，每个表格行都会动态生成编辑按钮。

<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

请帮助我如何做到这一点

【问题讨论】：

参考这个stackoverflow.com/questions/23572428/…

标签： html angularjs

【解决方案1】：

很简单

 <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>

这里可以使用ng-if指令实现需求，

【讨论】：

感谢您的回复。我知道这一点。我不想在上写按钮。没有在表格中写按钮如何生成按钮
在我的餐厅 pos 项目中完成订单编辑按钮后不会出现在表格中。如果客户订单未完成，店员将编辑订单并在表格中显示编辑按钮
非常感谢@chathura Hetiarachichi

【解决方案2】：

您可以在生成的行中添加按钮

<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>

现在的新问题是如何让您的用户在单击按钮后编辑数据。您是否将文本转换为可编辑字段？或者您是否将数据填充回顶部的表单？这些将超出此问题的范围。

【讨论】：

感谢您的回复。我知道这一点。我不想在上写按钮。没有在表格中写按钮如何生成按钮。
@SrinivasAppQube 你这样做的原因是什么？如果您希望某些内容出现在 HTML 中，最好的方法是将其写入视图中。
在我的餐厅 pos 项目中完成订单编辑按钮后不会出现在表格中。如果客户订单未完成，店员将编辑订单并在表格中显示编辑按钮
@SrinivasAppQube 按钮上的ng-show 会满足您的要求吗？
我也尝试过，但它隐藏了表格中的每个编辑按钮。 ng-隐藏/ng-显示。无论如何感谢您的讨论。