Question

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

// get all table names:
$tquery = mysqli_query($conn, "SELECT table_name FROM information_schema.tables WHERE table_schema like 'rft%'");
while ($table = mysqli_fetch_array($tquery)) {
    // do your query per table
    $sql  = "SELECT * FROM " . $table['table_name'] . " WHERE ( Code LIKE '".$requestData['search']['value']."%' ";
    $sql .=" OR Year LIKE '".$requestData['search']['value']."%' )";
    $query = mysqli_query($conn, $sql);    
    while ( $row = mysqli_fetch_array($query) ) {
        // do what you want with $row
    }
}

控制器文件如下所示。

 <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）按钮时为前一个按钮创建，minus按钮将保留新按钮。当用户点击减号按钮时，相应的行将被删除。

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 for remove按钮，如下所示：

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

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

{Name} or %name%

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

2 个答案: