Question

以下是我在事件中显示一组与会者的代码：

<div ng-repeat="attendee in individualEvent.attendees" ng-if="findUser(attendee)>
    <a href="/#/users/{{attendee}}">{{attendee}}</a></td>
</div>

在我的控制器中，我有：

$scope.findUser = function(attendee){
  if(attendee === $scope.currentUser.username){
    return false;
  }
  else{
    return true;
  }
};

不幸的是，这不起作用。相反，它只是使显示的一切都消失了。我不确定如何有条件地应用此HTML标记。如果与会者的姓名等于$scope.currentUser.username，我不希望将<a href>应用于此名称。关于如何做的任何想法？谢谢！

编辑：我只是想要它，以便出席与会者数组中的所有名称，但标签不适用于与会者等同于currentUser.username的标签（即，与会者姓名只是文本，而不是超链接）。

编辑2：我添加了ng-switch，但我不知道它为什么不能正常工作。这可能是一个范围问题吗？

<div ng-repeat="attendee in individualEvent.attendees" ng-switch on="individualEvent.attendees">
    <div ng-switch-when="currentUser.username">{{attendee}}</div>
    <div ng-switch-default><a href="/#/users/{{attendee}}">{{attendee}}</a></div>
</div>

我仔细检查了我的与会者和current.username不为null或为空，并且其中一个与会者值等于currentUser.username值。关于如何解决这个问题的任何想法？

Answer 1

您可以使用过滤器代替ng-if。对输入列表中的每个项目执行过滤器，仅当过滤器匹配时才选择该项目。所以：

<div ng-repeat="attendee in individualEvent.attendees | filter:findUser">
    <a href="/#/users/{{attendee}}">{{attendee}}</a></td>
</div>

使用findUser作为输入参数调用范围函数attendee。

Answer 2

<div ng-repeat="attendee in individualEvent.attendees" ng-if="findUser(attendee)>
<a href="/#/users/{{attendee}}" ng-if="!isCurrentUser(attendee)">{{attendee}}</a>
</div>

$scope.isCurrentUser = function(attendee){
  return $scope.currentUser.username === attendee
}

这应该有效，但我也喜欢metacubed的过滤方法。

*在评论后编辑

此示例应该有效。

<div ng-repeat="attendee in individualEvent.attendees" ng-if="findUser(attendee)>
   <a href="/#/users/{{attendee}}" ng-if="!isCurrentUser(attendee)">{{attendee}}</a>
   <div ng-if="isCurrentUser(attendee)">{{attendee}}</div>
</div>

有条件地应用HTML标签？

2 个答案: