使用ng-if根据条件显示特定内容

Question

我试图使用ng-if来在满足条件时显示某些行，但似乎无法完全正确地使其工作。

<div style="margin-bottom: 1em;">

  <h4><!-- content omitted for brevity--></h4>

  <p>
    <strong>Covered:</strong> &nbsp;
    <a ng-href class="pointer" data-ng-repeat="life in data.list2 track by $index" ng-if="life.beneficiary.length > 0" ng-click="c.editBeneficiary(life)">

      <!-- content omitted for brevity-->
    </a>

    <a ng-href class="pointer" ng-if="life.beneficiary.length = 0" ng-click="c.addBeneficiary()">Add Beneficiary&nbsp;<i class="fa fa-plus-circle" style="color: green;"/></a></p>

</div>

在上面的代码中，如果受益人的数量大于0（ng-if="life.beneficiary.length > 0"），我想列出名称并允许用户在必要时进行编辑。这部分工作正常。然而，如果受益人的数量等于0，则我希望有一个链接，上面写着“添加受益人”，并允许用户这样做。

我把ng-if语句放在了<a>标签中，我不确定这是否正确。当我用没有受益人的用户登录时，“添加受益人”链接没有显示出来。

• 我在这里做错了什么？

- Dave

Answer 1

问题在于life.beneficiary.length = 0不是一个比较，而是试图将值0（零）分配给life.beneficiary.length（这是错误的）。另外，当没有受益人时，life.beneficiary.length == 0（正确）可能会产生假值，因为life.beneficiary可能是null或undefined（这取决于您的控制器逻辑）...但是，为了解决这个问题，请尝试：将ng-if="life.beneficiary.length = 0"更改为ng-if="!life.beneficiary.length"（这相当于ng-if="life.beneficiary.length == 0"，但如果life.beneficiary是null或undefined，它不会在您的逻辑中失败）。

<a ng-href class="pointer" ng-if="!life.beneficiary.length" ng-click="c.addBeneficiary()">Add Beneficiary&nbsp;
</a>

此外，建议将两个链接（<a>）都包含在一个元素内（span、div等任意元素均可），该元素将包含ng-repeat，如下所示：

<p>
<!-- there is content omitted for brevity -->
  <span data-ng-repeat="life in data.list2 track by $index">

    <a class="pointer" ng-if="life.beneficiary.length > 0" ng-click="c.editBeneficiary(life)">

    <!-- content omitted for brevity-->
    </a>

    <a class="pointer" ng-if="!life.beneficiary.length" ng-click="c.addBeneficiary()">Add Beneficiary&nbsp;</a>

  </span>

</p>

- lealceldeiro

---

这并不能解决问题，因为他的 ng-repeat 放在第一个 <a> 上，而不是在两个 <a> 标签或容器元素上都放置 ng-repeat。 - kennypowers

@kennypowers，很抱歉，我不太明白你想说什么:( OP在他的问题中只放了一个ng-repeat。我也看到了你的答案，但我还没有理解。你为什么需要第二个ng-repeat？我认为你可能假设了那一部分。那段代码将生成与发布在问题中的代码完全不同的HTML。 - lealceldeiro

哦，现在我明白了混淆（是你的还是我的，只有原帖发布者会知道）。我认为所有调用 editBeneficiary 函数的 <a> 标签都必须在 ng-repeat 内（因为它们用于编辑元素），最后再添加一个用于添加新受益人的标签（但仅限于末尾）。显然，你认为这有不同的行为方式（我并不是说这种方式有错。向原帖发布者询问或许是个好主意 :) ）。 - lealceldeiro

不，我认为你不需要，戴夫。根据上面提供的答案，我认为你可以解决你的问题。 - lealceldeiro

@Dave，你在第二个<a>标签的ng-if中使用了life。但是那里不存在life。第二个<a>标签位于创建life的ng-repeat之外。因此，你需要创建一个容器元素，例如一个<div>，并将ng-repeat添加到其中。在该<div>内部，您可以使用单独的ng-if语句放置两个<a>标签。这样可以实现你想要的效果。或者你可以将相同的ng-repeat添加到两个<a>标签中。 - kennypowers

Answer 2

尝试更改此内容。

ng-if="life.beneficiary.length = 0"

In

ng-if="life.beneficiary.length == 0"

- valbrux

Answer 3

**

1. 使用 life.beneficiary.length === 0 而不是 life.beneficiary.length = 0
2. = 用于赋值，== 或 === 用于比较。

或者，您也可以使用此优化逻辑。

1. ng-if="life.beneficiary.length"

如果受益人长度为0，则链接将被隐藏，否则它将显示出来。

**

<a ng-href class="pointer" ng-if="life.beneficiary.length === 0" ng-click="c.addBeneficiary()">Add Beneficiary&nbsp;<i class="fa fa-plus-circle" style="color: green;"/></a></p>

- Pushp Singh

Answer 4

目前您的设置只会显示符合第一个"ng-if"条件的""标签。为了解决这个问题，两个""标签都需要一个"ng-repeat"语句以及相应的"ng-if"语句。

<div style="margin-bottom: 1em;">
<h4>
    <img class="icon" src="basic_life.png" height="30" width="30"> &nbsp;<strong>Insured?</strong> &nbsp;&nbsp;<font size=2>
        <i class="fa {{data.icon}}" style="color:{{data.color}}" /> {{data.status}}
    </font>&nbsp;&nbsp;
</h4>
<p>
    <strong>Covered:</strong> &nbsp;
    <a ng-href class="pointer" data-ng-repeat="life in data.list2 track by $index" ng-if="life.beneficiary.length > 0"
       ng-click="c.editBeneficiary(life)">
        <font ng-show="$last && !$first">&nbsp;and&nbsp;</font>{{life.beneficiary}}&nbsp;&nbsp;
        <i class="fa fa-edit" /><font ng-show="!$last">,&nbsp;</font>
    </a>
    <a ng-href class="pointer" data-ng-repeat="life in data.list2 track by $index" ng-if="!life.beneficiary.length" ng-click="c.addBeneficiary()">
        Add Beneficiary&nbsp;
        <i class="fa fa-plus-circle" style="color: green;" />
    </a>
</p>

如果您想将其放在单个ng-repeat下，则需要执行以下操作：

<div style="margin-bottom: 1em;">
<h4>
    <img class="icon" src="basic_life.png" height="30" width="30"> &nbsp;<strong>Insured?</strong> &nbsp;&nbsp;<font size=2>
        <i class="fa {{data.icon}}" style="color:{{data.color}}" /> {{data.status}}
    </font>&nbsp;&nbsp;
</h4>
<p>
    <strong>Covered:</strong> &nbsp;
    <div data-ng-repeat="life in data.list2 track by $index">
        <a ng-href class="pointer"  ng-if="life.beneficiary.length > 0"
           ng-click="c.editBeneficiary(life)">
            <font ng-show="$last && !$first">&nbsp;and&nbsp;</font>{{life.beneficiary}}&nbsp;&nbsp;
            <i class="fa fa-edit" /><font ng-show="!$last">,&nbsp;</font>
        </a>
        <a ng-href class="pointer" ng-if="life.beneficiary.length = 0" ng-click="c.addBeneficiary()">
            Add Beneficiary&nbsp;
            <i class="fa fa-plus-circle" style="color: green;" />
        </a>
    </div>
</p>

- kennypowers