AngularJs重定向

Question

I've got a table where 1 row has to link to something else.

Right now I've got it like this:

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

The last td has to link to something else. But right now all links to the same how could I manage that?

(In the ng-click method I redirect)

Answer 1

您可以使用$last （boolean）并将其作为参数传递给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

There are two problems in your current implementation.

1. You could use $last to bind click event to fire on last element. I had put $last before homeCtrl.redirectToEdit function call because that will make sure until $last (last element of ng-repeat appears) row gets clicked then only it will call the next function.

    ng-click="$last && homeCtrl.redirectToEdit(employee.EmployeeId);$event.stopPropagation()" 

2. I think you are facing problem related to event bubbling, where you have click event binded to child and parent element. So when click event happen inside inner element it will propagate that event to its parent. To avoid such unwanted behaviour you should stop inner event bubbling just by calling $event.stopPropagation() on inner td .

Answer 4

You can use $last and a condition:

<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

Ideally, You should set the ng-click to be per td because setting an ng-click to the full row will take precedence over any ng-click s inside it. Try this:

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

That said, if you want to keep your markup the way it is, you can look at this StackOverflow answer about stopping bubbling: Howto: div with onclick inside another div with onclick javascript