javascript - 如何在 HTML 标签中获取动态变量的值

Question

我目前正在使用 AngularJS，这是我的 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>

这是 Angular:

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

当页面加载时:

• 第一次，tdata.id 在 HTML View 中显示数字 id 1 并且 editCompany(index) 也打印到控制台编号 1。
• 第二次，在我使用 Angular orderBy 进行了排序之后, tdata.id 显示10对应的数字id tdata.companyName。然而，此时，editCompany(index) 仍然 打印到控制台编号 1，而不是 10。

我该如何解决？

Answer 1

使用 ng-click="editCompany(tdata.id) 而不是 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>