在 AngularJS 中，如何选择性地将项目包装在链接中

Question

我有一个有名字的人和一个可选的主页。如何选择性地将他们的名字包装在锚标记中？

<ul ng-repeat='person in people'>
  <li>
    <a href="{{person.website}}">
      {{person.name}}
    </a>
  </li>
</ul>

或者在person.website为零的情况下

<ul ng-repeat='person in people'>
  <li>
    {{person.name}}
  </li>
</ul>

在轨道中，我会使用该方法<%= link_to_unless person.website.blank?, seller.name, seller.website %>

如何在 AngularJS 中执行此操作？

Answer 1

您可以将以下函数添加到您的作用域：

$scope.linkToUnless = function(condition, label, href) {
    return condition ? '<a href="'+href'+">'+label+'</a>' : label;
};

或者你可以将你的HTML修改为这样的内容：

<ul ng-repeat='person in people'>
  <li>
    <a href="{{person.website}}" ng-if="person.website">
      {{person.name}}
    </a>
    <span ng-if="!person.website">
        {{person.name}}
    </span>
  </li>
</ul>

（只是受OP评论启发的注释，ng-if仅在anugular 1.1.5之后可用;对于旧版本，请使用ng-show和ng-hide

或者，您可以编写自定义指令并像以下方式使用它：

<link-to-if href="person.website" label="person.name" />