如何使用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