在AngularJS中,我如何可选地将项目包装在链接中

我有一个名字和一个可选主页的人。 我如何可选地将其名称包装在锚标签中?

<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中做到这一点?


您可以将以下功能添加到您的范围中:

$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的灵感来自OP的评论, ng-if仅在自动版1.1.5之后才可用;对于旧版本,则使用ng-showng-hide来代替

或者你可以编写一个自定义指令并使用它:

<link-to-if href="person.website" label="person.name" />
链接地址: http://www.djcxy.com/p/74471.html

上一篇: In AngularJS, how do I optionally wrap item in a link

下一篇: IPhone Web Service communication