how to detect which table row is clicked when ng-repeat is on the <tr> tag | Angularjs

Question

I have a table row with input columns, i want to get the value (id) of a td, and for some reason, i have to do it by calling a function when td is clicked

HTML CODE:

<tr ng-repeat="fr in nonConfirmedFactureRetour">
    <td> 
//storing id in the data-item Attr.

        <input id="pending_item_name" data-item="{{fr.id}}" value="{{fr.facture_item_name}}" type="text"/>
    </td>
    <td>
        <input id="pending_cls_crt" value="{{fr.fcls_crt}}"  type="text"/>
    </td>
    <td>
        <input id="pending_piece" value="{{fr.fpiece}}"  type="text"/>
    </td>
    <td>
        <input id="pending_dateCom" value="{{fr.dateCom}}"  type="text"/>
    </td>
    <td>
        <input id="pending_dateRec" value="{{fr.dateRec}}"  type="text"/>
    </td>
    <td>
// calling function to hget the id 
        <input ng-click="confirmEntity_retour();" type="button" value="Confirm"/>
    </td>
</tr>

JS Code:

$scope.confirmEntity_retour=function(){
            var item_nameId=$("#rfi").attr("data-itid");
            alert(item_nameId); //alert the id when calling this function
}

I expect to get the id of the input attr. when clicking on the submit but the problem is that i am getting always the first id no matter what td is clicked

Answer 1

Using JQuery to get data from the DOM is against the paradigm of AngularJS. You should use data-binding instead. You can pass the item's ID as an argument to the confirmEntity_retour function.

HTML template:

<input ng-click="confirmEntity_retour(fr.id);" type="button" value="Confirm"/>

Controller:

$scope.confirmEntity_retour = function(id) {
  alert(id);
}