How to add more row after selecting plus button inside a table using Angular.js

Question

I need one help.I need to generate a row dynamically after click on plus button using angular.js and that new created row should contain the id and model dynamically.I am explaining my code below.

<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>

The out put of the above table is given below.

my controller file is given below.

$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) {
        })

Here i need when user will click on plus button for one day one new row will add for that same day with different id and model name dynamically.please help me.

Answer 1

I have created a plunker demo for you which describe my idea. Hope it may help you. https://plnkr.co/edit/JiieQZ?p=preview