Question

我创建了一个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

请帮我解决这个问题

Answer 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指令

来达到要求

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

现在新的问题是如何让用户在点击按钮后编辑数据。你把文字变成了可编辑的字段吗？或者您将数据填充回顶部的表单？这些都超出了这个问题的范围。

Answer 3

试试这个

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

或者您想在点击编辑后制作标签文本框。

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

3 个答案: