如何在使用Angular.js的表中選擇加號按鈕后添加更多行

Question

我需要一個幫助。我需要使用angular.js單擊加號按鈕后動態生成一行，並且新創建的行應動態包含id和模型。我在下面解釋我的代碼。

<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> <select class="form-control" name="catagory[$index]"  id="{{'catagory'+$index}}" ng-model="answers['catagory'+$index]" ng-options="cat.name for cat in listOfCatagory track by cat.value " ng-change="removeBorder('catagory',$index,answers['catagory'+$index].value,answers['cata'+$index].value,answers['catagory'+$index].name,answers['cata'+$index].name);" >
<option value="">Select Category</option>
</select>
<select class="form-control" name="cata[$index]"  id="{{'cata'+$index}}" ng-model="answers['cata'+$index]" ng-options="cat.name for cat in listOfCatagory track by cat.value " ng-change="setCatagory($index,answers['catagory'+$index].value,answers['cata'+$index].value,answers['catagory'+$index].name,answers['cata'+$index].name);">
 <option value="">Select Category</option>
</select>
 </td>
<td>
<select class="form-control" name="subcatagory[$index]"  id="{{'subcatagory'+$index}}" ng-model="answers['subcatagory'+$index]" ng-options="sub.name for sub in listOfSubCatagory[$index] track by sub.value " ng-change="setSubCatagory($index,subcatagory[$index].value);" >
<option value="">Select Subcategory</option>
</select>
<select class="form-control" name="subcata[$index]"  id="{{'subcata'+$index}}" ng-model="answers['subcata'+$index]" ng-options="sub.name for sub in listOfSubCatagory1[$index] track by sub.value ">
<option value="">Select Subcategory</option>
 </select>
 </td>
 <td><input type="text" name="comment[$index]" id="{{'comment'+$index}}" class="form-control oditek-form" placeholder="Add Comment" ng-model="answers['comment'+$index]" ng-keyup="comment($index,comment[$index]);">
 <input type="text" name="comm[$index]" id="{{'comm'+$index}}" class="form-control oditek-form" placeholder="Add Comment" ng-model="answers['comm'+$index]">

</td>

<td><input type="submit" name="plus" id="plus" value="+" style="width:20px; text-align:center;" onclick="cloneRow(this)"></td>

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

上表的輸出如下。

我的控制器文件如下。

$scope.answers={};
    $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){
                 $scope.days.push(obj);
            })
        },function errorCallback(response) {
        })

在這里，我需要用戶單擊plus按鈕一天的時間，同一天將動態添加具有不同ID和型號名稱的新行。請幫助我。

Answer 1

我為您創建了一個演示我的想法的plunker演示。 希望對您有所幫助。 https://plnkr.co/edit/JiieQZ?p=preview