html - 在 AngularJS 中，我如何选择将项目包装在链接中

Question

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

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

在 rails 中我会使用方法 <%= 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" />