How to get row data from table using angularjs

Question

I am new to angularjs. I am facing an issue. I have a table with one radio button. When the user selects any radio button and click on the submit button, I need to show the selected rows details.

Html code:

<table>
    <thead>
        <tr>
            <th>Select</th> 
            <th>First Name</th> 
            <th>Last Name</th> 
            <th>Unique Reference ID</th> 
            <th>Country</th> 
            <th>Branch</th> 
            <th>Card No</th> 
       </tr>
    </thead>

    <tr ng-repeat="d in Employees">
        <td><input type="radio"></td>
        <td>{{d.fname}}</td>
        <td>{{d.lname}}</td>
        <td>{{d.uniqueid}}</td>
        <td>{{d.country.name}}</td>
        <td> {{d.branch.name}}</td>
        <td>{{d.cardno}}</td> 
    </tr>
</table>

<table>
    <tr>
        <td><input type="button" value="Edit" ng-click="Edit()"></td>
    </tr>
</table>

controller code:

$scope.Edit=function()
{
    //need id of selected row ?
};

You put the checkbox and the edit function inside the ng-repeat, where you have access to individual employee items d, and also $index of the array. — ms87
– ms87, Commented Mar 14, 2014 at 7:56
@Mohammad I can not change the requirement.This has to be in above format only. Thanks for you suggestion — sar
– sar, Commented Mar 14, 2014 at 8:46
please elaborate it is not clear. you are already showing the details in the table — Rishul Matta
– Rishul Matta, Commented Mar 14, 2014 at 8:52

Community · Accepted Answer · 2017-05-23 10:28:22Z

6

Something like this:

<input type="radio" ng-click="editData.employee = d">

And the controller:

$scope.editData = {};

$scope.Edit = function() {
  var id = $scope.editData.employee.id;
};

I just answered another question about how it affects your code that ng-repeat creates a new scope for each list item, which is why you need the editData object for it to work. It could help you understand why you need it: Angular replace data from ng-repeat item

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Mar 14, 2014 at 7:56

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

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

5 Comments

sar Over a year ago

getting error $scope.employeeToEdit undefined..could you elaborate your code

Anders Ekdahl Over a year ago

Sorry, forgot that the employeeToEdit property was set on the ng-repeat scope and not the scope that your Edit method is on. I've updated my answer.

sar Over a year ago

when i try to print id with 'alert' it is giving 'undefinded' value.

Anders Ekdahl Over a year ago

Try console.log($scope.editData.employee). Looks like your id is called uniqueid, so you should probably use .uniqueid instead of .id.

sar Over a year ago

sorry my typing mistake..Thanks .You really save my day.

chbrown · Accepted Answer · 2014-03-14 07:57:44Z

0

You'll want to use ng-model and ng-value attributes in your radio input; see http://docs.angularjs.org/api/ng/input/input%5Bradio%5D.

You'll also want to format your html with at least some semblance of sanity.

answered Mar 14, 2014 at 7:57

chbrown

12k2 gold badges55 silver badges62 bronze badges

Collectives™ on Stack Overflow

How to get row data from table using angularjs

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related