How to get dynamic variable's value inside a HTML tag

Question

I'm 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:

first time, tdata.id show the number id 1 in HTML view and editCompany(index) also print out to the console number 1.
second time, after I did a sort using Angular orderBy, tdata.id show the number id 10 corresponding with tdata.companyName. However, at this time, editCompany(index) still print out to the console number 1, not 10.

How can I fix it?

Upalr · Accepted Answer · 2015-11-17 10:58:13Z

2

Use ng-click="editCompany(tdata.id) instead of ng-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>

answered Nov 17, 2015 at 10:58

Upalr

2,1462 gold badges25 silver badges33 bronze badges

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

1 Comment

BraveVN Over a year ago

thank you, it works like a charm. This stupid mistake took me 2 hours to find how to fix it

PLASMA chicken · Accepted Answer · 2021-11-14 17:23:08Z

0

You have to remove {{ }} from your code

IN 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>

edited Nov 14, 2021 at 17:23

PLASMA chicken

2,7952 gold badges18 silver badges29 bronze badges

answered Nov 17, 2015 at 10:58

Jenson Raby

7892 gold badges6 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to get dynamic variable's value inside a HTML tag

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related