在ng-if函数上添加删除html标记链接

Question

HTML：

<a data-ng-if="price" data-ng-click="selected(price)">
    <div>
        ...
    </div>
</a>

我想删除<a></a> if data-ng-if="!price"

有谁知道这样做的正确方法？

Answer 1

有两个选项，第一个是将内部内容移动到脚本中并在两个位置呈现它：

<script type="text/ng-template" id="main-content.html">
      <div>...your inner content</div>
</script>

<a ng-if="price" data-ng-click="selected(price)">
    <div ng-include="'main-content.html'"></div>
</a>

<div ng-if="!price" ng-include="'main-content.html'"></div>

第二种方法是，您可以使用CSS使其无法点击：

<a ng-class="{no-price: !price}" data-ng-click="selected(price)">
    <div>
        ...
    </div>
</a>

在你的CSS中：

a.no-price, a.no-price:hover, a.no-price:visited, a.no-price:focus {
    color: black;    // normal color
    pointer-events: none;    // no clickable
    text-decoration: none;    // No link feel
}