2016-03-29 13 views
2

私は1 rowが何かにリンクする必要があるテーブルを持っています。AngularJs redirect

は、今私はこのようにそれを持っている:

<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は何か他のものにリンクしています。しかし今、私はそれをどうやって管理することができるのでしょうか?

(In the ng-click method I redirect) 
+0

<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> 
は、あなたのマークアップ、それは方法を維持したいならば、あなたはバブリングを停止については、このStackOverflowの答えを見ることができる、と述べたこと何かがあなたを助けていない場合は誰にも返信を受け入れる..またはありがとう:) –

+0

@PankajParkerええ、あなたは正しいです、ここで助けてください! – Jamie

+0

嬉しいことに、あなたはそれに反応しました。Thnaks :-) –

答えて

1

を試してみてください。

  1. あなたは最後の要素に火にクリックイベントをバインドする$lastを使用することができます。私は$lasthomeCtrl.redirectToEditの関数呼び出しの前に置いていたので、$last(最後の要素はng-repeatと表示されます)の行がクリックされてから、次の関数だけが呼び出されることになります。

    ng-click="$last && homeCtrl.redirectToEdit(employee.EmployeeId);$event.stopPropagation()" 
    
  2. 私はあなたが子や親要素にバインドさイベントをクリックしていeventバブリングに関連する問題に直面していると思います。したがって、クリックイベントが内部要素内で発生すると、そのイベントをその親に伝播します。このような望ましくない振る舞いを避けるためには、$event.stopPropagation()tdと呼ぶだけで、内部イベントのバブリングを止めるべきです。あなたが$lastおよび条件を使用することができます

1

あなたは$last(boolean)を使用し、最後の要素であるかどうかによって、ユーザーをリダイレクトし、その後、あなたのNG-クリック機能にパラメータとして渡すことができます。

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

あなたの現在の実装では二つの問題があり、この

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

理想的
<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> 
1

フル行にng-clickを設定する任意のng-click Sよりも優先されますので、あなたはtdあたりにするNGクリックして設定する必要がありますその中。これを試してください:あなたはに多くのオプションを持っていますHowto: div with onclick inside another div with onclick javascript