AngularJs redirect

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)

you do have many options to accept to answer.. or atleast reply on anyone if anything doesn't helped you.. Thanks :) — Pankaj Parkar, Mar 30 '16 at 13:50

score 1 · Answer 1 · answered Mar 29 '16 at 16:03

You can use $last(boolean) and pass as parameter to your ng-click function, then redirect the user depending if is the last element or not.

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

score 1 · Answer 2 · answered Mar 29 '16 at 16:04

1

try this

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

answered Mar 29 '16 at 16:04

Hadi J

16,989
4
36
62

Pankaj Parkar · Accepted Answer · 2016-03-29T16:12:05.703

There are two problems in your current implementation.

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()" 
```
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.

score 1 · Answer 4 · answered Mar 29 '16 at 16:05

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>

score 1 · Answer 5 · edited May 23 '17 at 11:50

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

AngularJs redirect

5 Answers5