如何在 HTML 标记中获取动态变量的值答案

【问题标题】：How to get dynamic variable's value inside a HTML tag如何在 HTML 标记中获取动态变量的值
【发布时间】：2016-02-18 17:09:47
【问题描述】：

我目前正在使用 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 视图中显示号码 id 1 和 editCompany(index) 也打印到控制台号 1。
第二次，在我使用Angular orderBy 完成sort 之后， tdata.id 显示号码 id 10 对应于 tdata.companyName。不过此时editCompany(index)还是打印到控制台编号1，而不是10。

我该如何解决？

【问题讨论】：

标签： javascript html angularjs

【解决方案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>

【讨论】：

谢谢你，它就像一个魅力。这个愚蠢的错误花了我 2 个小时才找到解决方法

【解决方案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>
</tbody>

【讨论】：