我正在重构一个用角度编写的表格。目前 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>
是否有另一种更优雅和/或 Angular 的方式来实现这个解决方案?
你可以简单地这样做:
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)