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

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

我在做什么错了？

最佳答案

问题是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>