How can I change ng-click behavior for a single element in an ng-repeat?

Question

I am refactoring a table written in angular. Currently ng-repeat is used to create multiple tables rows, any of which will redirect to a given ui-sref when clicked upon:

        <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' with a checkbox, the problem being that the check box needs to be toggled when clicked on, and not redirect to the ui-sref like the rest of the td's.

I have a working solution which is to hardcode the ui-sref into every except for 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 another, more elegant and/or Angular way to implement this solution?

Halfdan

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>

Redneck

Answer 2

You could 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 get the click event first, you should be able to stop it from propagating to it's parent, which will prevent it from following the link.

http://jsfiddle.net/H2jUH/

Manichaeism

This dontSref() function worked very nicely for me. Thanks for sharing. – Bakeman