javascript - 如果满足条件，使用 ng-if 显示某些内容

Question

我正在尝试使用 ng-if在满足条件时显示某些行，但似乎不能让它 100% 正确工作。

<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> 中的陈述标签，我不确定这是否正确。当我以没有受益人的用户身份登录时，“添加受益人”链接不会显示。

• 我在这里做错了什么？

Answer 1

问题是life.beneficiary.length = 0不是比较，它试图分配 0 (零)值到 life.beneficiary.length (这是错误的)。

此外，在没有受益人的情况下life.beneficiary.length == 0 (这是正确的)可能是假的，因为 life.beneficiary可能是 null或 undefined (这取决于你的 Controller 逻辑)......但是，为了解决这个尝试:

改变 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>