如果angularjs中的值为null，则删除href属性

Question

我正在尝试将条件应用于href或ng-href。

条件为if email !== null

我的代码如下所示：

<a ng-attr-href="{{email !== null}}" href="mailto:{{email | lowercase}}">{{email | lowercase | nullValue}}</a>

这是评估href="true"或href="false"。

这似乎接近工作，但如果值为null，我仍然会得到href属性：

ng-attr-href="mailto:{{email !== null ? email: email | lowercase}}"

如果数据中的值为null，如何完全删除href？是否可以围绕html href属性包装整个条件？

Answer 1

有几种方法可以解决您的问题。我更喜欢这个：

<a ng-if="email !== null" href="mailto:{{email | lowercase}}">{{email | lowercase | nullValue}}</a>
<a ng-if="email == null">{{email | lowercase | nullValue}}</a>

如果您需要更复杂的条件或属性切换，可以轻松将其包装到指令中。

Answer 2

您也可以像以前一样使用类似于 ng-attr-href 的内容，而只使用 ng-href ：

<a ng-href="{{email ? 'mailto:'+(email | lowercase) : ''}}">
{{email | lowercase | nullValue}}
</a>

虽然这总是会在锚标记中创建 ng-href 属性，但如果没有电子邮件，它将为空，并且不会创建 href 属性。最终结果如下所示：

<a ng-href="mailto:tests" href="mailto:tests">tests</a>
<a ng-href></a>