Angularjs 如何更改ng repeat中单个元素的ng click行为?
我正在重构一个用angular编写的表。当前ng repeat用于创建多个表行,单击其中任何一行都将重定向到给定的ui sref:Angularjs 如何更改ng repeat中单个元素的ng click行为?,angularjs,angularjs-ng-repeat,angularjs-ng-click,Angularjs,Angularjs Ng Repeat,Angularjs Ng Click,我正在重构一个用angular编写的表。当前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})">
<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>
{{user.name}
{{user.atting?'Yes':'No'}
{{user.interestDeclared}
{{user.interestThreeorCreate}
{{user.city}
{{user.searchStage==='Out'?'Opted Out':user.searchStage}
我需要替换第二个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>
{{user.name}
{{user.interestDeclared}
{{user.interestThreeorCreate}
{{user.city}
{{user.searchStage==='Out'?'Opted Out':user.searchStage}
是否有其他更优雅和/或角度更高的方法来实现此解决方案?您可以执行以下操作:
<td ng-click="dontSref($event)">{{user.attending ? 'Yes' : 'No'}}</td>
$scope.dontSref = function(e) {
e.preventDefault();
e.stopPropagation();
}
{{user.atting?'Yes':'No'}
$scope.dontSref=函数(e){
e、 预防默认值();
e、 停止传播();
}
基本上,由于您的元素将首先获得click事件,因此您应该能够阻止它传播到其父元素,这将阻止它跟随链接
您只需执行以下操作:
<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>
{{user.name}
{{user.interestDeclared}
{{user.interestThreeorCreate}
{{user.city}
{{user.searchStage==='Out'?'Opted Out':user.searchStage}
这个dontSref()
函数对我来说运行得非常好。谢谢分享。