如何更改ng-repeat中单个元素的ng-click行为？

Question

我正在重构一个用棱角分明的表格.目前ng-repeat用于创建多个表行,当单击时,其中任何一个行都将重定向到给定的ui-sref:

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

我需要替换第二个td,当前显示"是"或"否"带有复选框,问题是复选框需要在单击时切换,而不是像td的其余部分一样重定向到ui-sref .

我有一个有效的解决方案,即将ui-sref硬编码到除复选框之外的每一个:

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

是否有另一种更优雅和/或角度的方式来实现此解决方案？

Answer 1

你可以这样做:

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