如何使用Angular.js打開新行後添加刪除按鈕

Question

我有一個問題，我需要添加一個刪除（減號）按鈕後添加一個新行使用加號button.I解釋我的代碼如下。

<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="answer in d.answers"> 
<td> 
<select class="form-control" id="answer_{{$index}}_category" name="answer_{{$index}}_category" ng-model="answer.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="answer in d.answers"> 
<td> 
<select class="form-control" id="answer_{{$index}}_subcategory" name="answer_{{$index}}_subcategory" ng-model="answer.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="answer in d.answers"> 
    <td> 
    <input type="text" id="answer_{{$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answers.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按鈕，一個新的行adding.I需要當一個新的行會添加一個刪除（minus）按鈕將創建前一個和plus按鈕，將繼續留在新的。當用戶點擊減號按鈕時，相應的行將被刪除。請幫幫我。

Answer 1

在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應該是可訪問這個工作。

Answer 2

添加HTML的旁邊刪除按鈕加號按鈕，如下圖所示：

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

，並在控制器添加函數：

$scope.removeNewRow= function(index) { 
     $scope.d.answers.splice(index, 1); 
}