如何使用Angular有条件地向元素添加属性？ （不仅属性数据，整个属性）

Question

我有一些用角度材料创建的链接。在那里我们使用链接和按钮<md-button>。现在我有一个链接，只有当url存在时我才需要添加href属性。否则它不应该有href。

原因是，我有下面的主要链接和子链接。具有子链接的主链接不能具有href。如果它确实至少有空的href，只要我点击它以展开子链接，它就会转到索引模板。有些主要链接没有任何子链接。所以，对于他们我需要href和链接与子链接我需要完全删除href。我怎么能这样做？

Answer 1

我不是棱角分明的专家，但如果我是正确的，对于Angular 1.3及以上版本：

<a ng-attr-href="{{href || undefined}}">Hello World</a>

对于1.3以下的版本，我想你可以这样做：

<a ng-if="href" ng-attr-href="{{href}}">Hello World</a>
<a ng-if="!href" >Hello World</a>

个人而言，我不喜欢第二种方法，因为它会导致代码重复。

来自this post

的回答

Answer 2

您可以在指令的链接功能

中添加href属性

return {
  scope : {
    link : '=myLink'
  },
  link: function(scope, elem) {
    if (scope.link.url) {
      elem.attr('href', scope.link.url);
    }
  }
}

用法：

<a my-link="l" ng-bind="l.name"></a>

http://plnkr.co/edit/p8PsWosSPmGlTjrjSN9S?p=preview

如果符合您的需求，您也可以使用ngHref，Chandermani指出。如果未定义，则不会添加href。

<a ng-href="{{l.url}}" ng-bind="l.name"></a>

Answer 3

您通常使用ng-if组合的多个元素，并在相应元素上包含/排除属性。例如，考虑一个表行，它必须显示像Edit这样的链接，并假设它的属性应该添加在一些布尔字段foo上。

<tr ng-repeat="item in items">
<td>
<a href="#/edit?id=foo" ng-if="item.foo" custom-attr="foo">Edit</a>
<a href="#/edit?id=foo" ng-if="!item.foo">Edit</a>
</td>
<!--other columns -->
</tr>

普兰克：http://plnkr.co/edit/G4aTyxQdbeJdWwtmu91t?p=preview