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.

may be help you http://stackoverflow.com/questions/32470928/angular-formly-adding-form-fields-dynamically-on-user-click/35603088#35603088 — Hadi J, Mar 15 '16 at 08:58
Can you add your controller? It seems like you just need to add another day object to your days array. If you are doing this and it's not working, try changing your button to be an tag. It's possible that the fact it is a submit button might be breaking it. — Thomas Illingworth, Mar 15 '16 at 09:01
i think you need to redesign your model of answers... your answer object should contain arrays of category, subcategory according to day... — Ankit Pundhir, Mar 15 '16 at 09:20
you just have to push a plain object having properties null inside model. ng-repeat will take care of it. Also you need to modify your html to use nested ng-repeat — Ankit Pundhir, Mar 15 '16 at 09:23
Column name have to be put in an array, and then have a chance to dynamically append new column. `$scope.keys = ["Day", "Category"];` and do `$scope.keys.push("New Column")` by click button — yujuiting, Mar 15 '16 at 09:39

score 1 · Accepted Answer · answered Mar 15 '16 at 10:18

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

answered Mar 15 '16 at 10:18

Ankit Pundhir

1,097
8
13

its coming but i need also the id and model name should different using the $index of each creating row. – Mar 15 '16 at 11:16
you can use $index as id for nested ng-repeat and $parent.$index for outer ng-repeat – Ankit Pundhir Mar 15 '16 at 11:23
I think for you it may be simple to add little more modification in html to as you were assigning id and name earlier. – Ankit Pundhir Mar 15 '16 at 11:24
i have updated that plunker you can go through it... I just modified html to use id and name for select box and input box... – Ankit Pundhir Mar 15 '16 at 11:28
yes,i have to finally fetch all values from all fields to submit in db.Can you please change your code accordingly. – Mar 15 '16 at 11:28

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

1 Answers1