AngularJs 重定向

Question

我有一个 table，其中 1 row 必须 link 到其他地方。

现在我是这样的:

<table class="table table-hover">
    <thead>
    <tr>
        <th>Functie</th>
        <th>Bedrijf</th>
        <th>Naam</th>
        <th>Achternaam</th>
    </tr>
    </thead>
    <tbody ng-show="!homeCtrl.loading">
    <tr ng-repeat="employee in homeCtrl.employees" ng-click="homeCtrl.redirectToShow(employee.EmployeeId)">
        <td>{{  employee.Role }}</td>
        <td>{{  employee.Company }}</td>
        <td>{{  employee.FirstName }}</td>
        <td>{{  employee.LastName }}</td>
        <td ng-show="homeCtrl.canEdit" ng-click="homeCtrl.redirectToEdit(employee.EmployeeId)"><span class="glyphicon glyphicon-pencil"></span></td>
    </tr>
    </tbody>
</table>

最后一个 td 必须 link 到别的地方。但是现在所有 link 都是一样的，我该如何处理？

(In the ng-click method I redirect)

Answer 1

您可以使用 $last（布尔值）并将其作为参数传递给您的 ng-click 函数，然后根据是否是最后一个元素重定向用户。

<td ng-show="homeCtrl.canEdit" ng-click="homeCtrl.redirectToEdit(employee.EmployeeId, $last)"><span class="glyphicon glyphicon-pencil"></span></td>

Answer 2

试试这个

 <td ng-show="$last  && homeCtrl.canEdit" ng-click="homeCtrl.redirectToEdit(employee.EmployeeId)"><span class="glyphicon glyphicon-pencil"></span></td>

Answer 3

您当前的实现有两个问题。

您可以使用 $last 将点击事件绑定到最后一个元素上。我在 homeCtrl.redirectToEdit 函数调用之前放置了 $last，因为这将确保直到 $last（ng-repeat 的最后一个元素出现）行被单击，然后它才会调用下一个函数。
```
ng-click="$last && homeCtrl.redirectToEdit(employee.EmployeeId);$event.stopPropagation()" 
```
我认为您遇到了与 event 冒泡相关的问题，其中您将点击事件绑定到子元素和父元素。因此，当内部元素内部发生点击事件时，它将将该事件传播到其父元素。为了避免这种不需要的行为，你应该通过在内部 td.

$event.stopPropagation()

Answer 4

您可以使用 $last 和一个条件：

<td ng-show="homeCtrl.canEdit && !$last" ng-click="homeCtrl.redirectToEdit(employee.EmployeeId)"><span class="glyphicon glyphicon-pencil"></span></td>
<td ng-show="homeCtrl.canEdit && $last" ng-click="homeCtrl.somethingDifferent(employee.EmployeeId)"><span class="glyphicon glyphicon-pencil"></span></td>

Answer 5

理想情况下，您应该将 ng-click 设置为每个 td，因为将 ng-click 设置为整行将优先于其中的任何 ng-click。试试这个：

<table class="table table-hover">
<thead>
<tr>
    <th>Functie</th>
    <th>Bedrijf</th>
    <th>Naam</th>
    <th>Achternaam</th>
</tr>
</thead>
<tbody ng-show="!homeCtrl.loading">
<tr ng-repeat="employee in homeCtrl.employees">
    <td ng-click="homeCtrl.redirectToShow(employee.EmployeeId)">{{  employee.Role }}</td>
    <td ng-click="homeCtrl.redirectToShow(employee.EmployeeId)">{{  employee.Company }}</td>
    <td ng-click="homeCtrl.redirectToShow(employee.EmployeeId)">{{  employee.FirstName }}</td>
    <td ng-click="homeCtrl.redirectToShow(employee.EmployeeId)">{{  employee.LastName }}</td>
    <td ng-show="homeCtrl.canEdit" ng-click="homeCtrl.redirectToEdit(employee.EmployeeId)"><span class="glyphicon glyphicon-pencil"></span></td>
</tr>
</tbody>

就是说，如果您想保持标记的原样，您可以查看 Whosebug 关于停止冒泡的回答：Howto: div with onclick inside another div with onclick javascript

AngularJs 重定向

AngularJs redirect

angularjs

events

angularjs-ng-repeat

angularjs-ng-click