How to get the value of a dynamic variable inside an HTML tag

Question

I am currently using AngularJS, this is my HTML:

<tbody>
    <tr dir-paginate="tdata in tableData | orderBy:predicate:reverse | filter:searchFilter | itemsPerPage:10 track by $index ">
        <td class="table-data-edit-all">
            <input type="checkbox" ng-model="tdata.selectedCell">
        </td>
        <td class="align-left">
            {{ tdata.companyName }}
        </td>
        <td class="align-left">
            {{ tdata.department }}
        </td>
        <td>
            <a ng-click="editCompany({{ tdata.id }})"><i class="fa fa-edit"></i></a>
            <a ng-click="removeCompany({{ tdata.id }})"><i class="fa fa-remove"></i></a>
        </td>
    </tr>
</tbody>

and here is Angular:

$scope.editCompany = function(index) {
    console.log(index);
    // my stuffs
}

When the page is loaded:

• the first time, it tdata.idshows the id number 1in HTML mode and editCompany(index)also prints to the console number 1.
• the second time, after I did sort, using Angular orderBy , tdata.idshow the id number 10corresponding tdata.companyName. However, at this time editCompany(index), still print to the console number 1, not 10.

How can i fix this?

Answer 1

Use ng-click="editCompany(tdata.id)insteadng-click="editCompany({{tdata.id}})

<tbody>
    <tr dir-paginate="tdata in tableData | orderBy:predicate:reverse | filter:searchFilter | itemsPerPage:10 track by $index ">
        <td class="table-data-edit-all">
            <input type="checkbox" ng-model="tdata.selectedCell">
        </td>
        <td class="align-left">
            {{ tdata.companyName }}
        </td>
        <td class="align-left">
            {{ tdata.department }}
        </td>
        <td>
            <a ng-click="editCompany(tdata.id)"><i class="fa fa-edit"></i></a>
            <a ng-click="removeCompany(tdata.id)"><i class="fa fa-remove"></i></a>
        </td>
    </tr>
</tbody>

Answer 2

{{}}

HTML

<tbody>
<tr dir-paginate="tdata in tableData | orderBy:predicate:reverse | filter:searchFilter | itemsPerPage:10 track by $index ">
    <td class="table-data-edit-all">
        <input type="checkbox" ng-model="tdata.selectedCell">
    </td>
    <td class="align-left">
        {{ tdata.companyName }}
    </td>
    <td class="align-left">
        {{ tdata.department }}
    </td>
    <td>
        <a ng-click="editCompany(tdata.id)"><i class="fa fa-edit"></i></a>
        <a ng-click="removeCompany(tdata.id)"><i class="fa fa-remove"></i></a>
    </td>
</tr>

,