如果满足条件，使用 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，那么我想要一个 link 表示 "Add Beneficiary"，并允许用户这样做。

我将 ng-if 语句放在 <a> 标记中，我不确定这是否正确。当我使用没有受益人的用户登录时，"Add Beneficiary" link 不会显示。

我在这里做错了什么？

Answer 1

尝试改变这个

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

在

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

Answer 2

您当前的设置方式只会显示满足第一个 ng-if 要求的 <a> 标签。您的两个 <a> 标签都需要一个 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>

Answer 3

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

Answer 4

**

使用 life.beneficiary.length === 0 代替 life.beneficiary.length = 0
=用于赋值，==或===用于比较。

或者，你也可以使用这个优化后的逻辑。

ng-if="life.beneficiary.length"

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

**

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

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

Using ng-if to show certain things if condition is met

html

javascript

angularjs

servicenow

angularjs-ng-if