在AngularJS中,如何选择将项目包装在链接中

时间:2013-09-27 21:08:41

标签: html 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中执行此操作?

1 个答案:

答案 0 :(得分:4)

您可以在范围中添加以下功能:

$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-showng-hide而不是 < / p>

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

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