如何在使用Angular.js打开新行后添加删除按钮

How to add delete button after new row opened using Angular.js?

本文关键字：新行 添加删除按钮 js Angular      更新时间：2023-09-26

我需要在使用加号按钮添加新行后添加一个删除（减号）按钮。我在下面提供我的代码。

 <table class="table table-bordered table-striped table-hover" id="dataTable" >                                             
 <thead>
<tr>
<th>Day</th>
 <th>Category</th>
<th>Sub Subcategory</th>
 <th>Comments Or special promotion</th>
<th>Add More</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="d in days">
 <td>{{d.day_name}}</td>
 <td>
 <table class="table table-bordered table-striped table-hover">
 <tbody>
<tr ng-repeat="answerswer in d.answers">
 <td>
 <select class="form-control" id="answerswer_{{$index}}_category" name="answerswer_{{$index}}_category" ng-model="answerswer.catagory" ng-options="cat.name for cat in listOfCatagory track by cat.value">
<option value="">Select Category</option>
 </select>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 <td>
 <table class="table table-bordered table-striped table-hover">
 <tbody>
 <tr ng-repeat="answerswer in d.answers">
 <td>
<select class="form-control" id="answerswer_{{$index}}_subcategory" name="answerswer_{{$index}}_subcategory" ng-model="answerswer.subcatagory" ng-options="sub.name for sub in listOfSubCatagory[$parent.$index] track by sub.value">
<option value="">Select Subcategory</option>
</select>
    </td>
    </tr>
     </tbody>
     </table>
     </td>
     <td>
     <table class="table table-bordered table-striped table-hover">
     <tbody>
     <tr ng-repeat="answerswer in d.answers">
    <td>
     <input type="text" id="answerswer_{{$index}}_comment" name="answerswer_{{$index}}_comment" placeholder="Add Comment" ng-model="answerswers.comment" class="form-control oditek-form">
     </td>
    </tr>
    </tbody>
     </table>
     </td>
     <td>
    <input type="submit" name="plus" id="plus" value="+" style="width:20px; text-align:center;" ng-click="addNewRow(d.answers)">
     </td>

     </tr>
    </tbody>
    </table>

控制器文件如下。

$scope.days=[];
    $http({
        method:'GET',
        url:"php/customerInfo.php?action=day",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function successCallback(response){
        //console.log('day',response.data);
        angular.forEach(response.data,function(obj){
              obj.answers = [];
              $scope.addNewRow(obj.answers);
              $scope.days.push(obj);
        })
    },function errorCallback(response) {
    })
    $scope.addNewRow = function(answers) {
    answers.push({
      category: null,
      subcategory: null,
      comment: null
    });
  };

在这里，当用户单击它时，我有一个plus按钮，正在添加新行。我需要新行何时添加一个删除（minus）按钮，为前一个按钮创建plus并且该按钮将保留在新按钮中。当用户单击减号按钮时，相应的行将被删除。

在您的 HTML 文件中：

<button ng-click="removeRow($index)">

在角度控制器代码中：

$scope.removeRow = function(id) { angular.forEach(answers, function(currentAnswer, index) { if (currentAnswer.id === id) { answers.splice(index, 1); } }); }

请注意，answers需要可访问才能正常工作。

添加html for Remove 按钮旁边的加号按钮，如下所示：

<button type="button" ng-click="removeNewRow($index)" ng-show="$first && !$last">

并在控制器中添加一个函数：

$scope.removeNewRow= function(index) {
       $scope.d.answers.splice(index, 1);
}
相关文章：