How to get each row data of a table using Angular.js

Question

I need one help.i want to fetch each row data of a table using Angular.js.I am explaining my code below.

    <tr ng-repeat="d in days">
    <td>{{d.day_name}}</td>
    <td> <select class="form-control" name="catagory[$index]"  id="catagory[$index]" ng-model="catagory" ng-options="cat.name for cat in listOfCatagory track by cat.value " ng-change="removeBorder('catagory',$index,catagory.value);" >
    </select></td>
    <td>
    <select class="form-control" name="subcatagory[$index]"  id="subcatagory[$index]" ng-model="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>

    </td>
     <td><input type="text" name="comment[$index]" id="comment" class="form-control oditek-form" placeholder="Add Comment" ng-model="comment[$index]" ng-keyup="comment($index,comment[$index]);"></td>
    </tr>   
<input type="button" class="btn btn-success" ng-click="saveResturantDetails(billdata);"  id="saveData" value="Save"   style="margin-right:20px;"/>

When user will click on save button the each row data should fetch to the controller.I am explaining my code below.

$scope.saveResturantDetails=function(billdata){
        for(var i=0;i< $scope.days.length;i++){
            var data={'cat':$scope.catagory[i].value,'subcat':$scope.subcatagory[i].value,'comment':$scope.comment[i]};
            arr.push(data);
        }
        console.log('arr',arr);
}

Here i am using $index in each model so that i can get data into a loop.But in this way i am getting this following error.

TypeError: Cannot read property 'value' of undefined

Please help me to resolve this issue.

What do you want pass in billdata var? u have to define it as the form name if you want to pass it — Cespejo
– Cespejo, Commented Feb 26, 2016 at 9:30

Prakash A · Accepted Answer · 2016-02-26 10:03:33Z

1

In your controller Declare a scope object called answers.

$scope.days = [{name:"m"},{name:"t"}];
$scope.answers={};
$scope.save = function(){ console.log($scope.answers)};

Then your html iterate days and assign ng-model to answers object.

<div><tr ng-repeat="d in days">
<td>{{d.name}}</td>
<td><input type="text" ng-model="answers['comment'+$index]"/></td>
</tr></div>
<button ng-click="save()">Save</button>

Ng Repeat creates Chid Scope so we won't get that in controller. This will definitely work. I Checked

Sorry for my bad english

answered Feb 26, 2016 at 10:03

Prakash A

1411 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user5443928 Over a year ago

what about other two dropdown field.

Prakash A Over a year ago

Same this as comment . Declare ng-model="answers['catagory'+$index]" ng-model="answers['subcatagory'+$index]" and you will get all answers

Prakash A Over a year ago

Even you can assign ng-model="answers['row'+$index]['comment'] ng-model="answers['row'+$index]['category'] this object will hold row wise comment and category

user5443928 Over a year ago

yes its coming...but how to mesure the ``nswer variable length`.

Prakash A Over a year ago

Object.keys($scope.answers).length This will give the length

Collectives™ on Stack Overflow

How to get each row data of a table using Angular.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related