How to change ng-click behavior for a single element in ng-repeat?

Question

I am refactoring a table written in angular. Currently, ng-repeat is used to create several rows of tables, any of which will be redirected to the given ui-sref when pressed:

<tbody> <tr ng-repeat="user in group | orderBy:sorter:reverse" class="tablebox-content" ui-sref="admin.candidates.detail({_id: user._id})"> <td class="name">{{user.name}}</td> <td>{{user.attending ? 'Yes' : 'No'}}</td> <td class="interestDeclared">{{user.interestDeclared}}</td> <td class="interestThreeOrGreater">{{user.interestThreeOrGreater}}</td> <td class="github"><a ng-href="{{user.github}}"a>{{user.github}}</a></td> <td class="email"><a ng-href="mailto:{{user.email}}">{{user.email}}</a></td> <td class="location">{{user.city}}</td> <td class="stage">{{user.searchStage === 'Out' ? 'Opted Out' : user.searchStage}}</td> </tr> </tbody> 

I need to replace the 2nd td, currently displaying “Yes” or “No” using the checkbox, the problem is that the checkbox should be switched when clicked and not redirect to u-sref like the rest of td's.

I have a working solution that is designed for hard coding ui-sref in each except the checkbox:

  <tbody> <tr ng-repeat="user in group | orderBy:sorter:reverse" class="tablebox-content"> <td ui-sref="admin.candidates.detail({_id: user._id})" class="name">{{user.name}}</td> <td><input type="checkbox" ng-model="user.attending"></td> <td ui-sref="admin.candidates.detail({_id: user._id})" class="interestDeclared">{{user.interestDeclared}}</td> <td ui-sref="admin.candidates.detail({_id: user._id})" class="interestThreeOrGreater">{{user.interestThreeOrGreater}}</td> <td ui-sref="admin.candidates.detail({_id: user._id})" class="github"><a ng-href="{{user.github}}"a>{{user.github}}</a></td> <td ui-sref="admin.candidates.detail({_id: user._id})" class="email"><a ng-href="mailto:{{user.email}}">{{user.email}}</a></td> <td ui-sref="admin.candidates.detail({_id: user._id})" class="location">{{user.city}}</td> <td ui-sref="admin.candidates.detail({_id: user._id})" class="stage">{{user.searchStage === 'Out' ? 'Opted Out' : user.searchStage}}</td> </tr> </tbody> 

Is there any other, more elegant and / or Angular way to implement this solution?

Answer 1

You can simply do this:

  <tbody> <tr ng-repeat="user in group | orderBy:sorter:reverse" class="tablebox-content" ui-sref="admin.candidates.detail({_id: user._id})"> <td class="name">{{user.name}}</td> <td ng-click="$event.stopPropagation()"><input type="checkbox" ng-model="user.attending"></td> <td class="interestDeclared">{{user.interestDeclared}}</td> <td class="interestThreeOrGreater">{{user.interestThreeOrGreater}}</td> <td class="github"><a ng-href="{{user.github}}"a>{{user.github}}</a></td> <td class="email"><a ng-href="mailto:{{user.email}}">{{user.email}}</a></td> <td class="location">{{user.city}}</td> <td class="stage">{{user.searchStage === 'Out' ? 'Opted Out' : user.searchStage}}</td> </tr> </tbody> 

Answer 2

You can do something like:

 <td ng-click="dontSref($event)">{{user.attending ? 'Yes' : 'No'}}</td> $scope.dontSref = function(e) { e.preventDefault(); e.stopPropagation(); } 

Basically, since your element will receive a click event first, you can stop it from propagating a parent to it, which will prevent it from being executed by reference.

http://jsfiddle.net/H2jUH/