如果满足条件,使用ng-if显示某些事物

时间:2017-04-04 19:51:53

标签: javascript html angularjs servicenow ngif

如果符合条件,我尝试使用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,那么我希望有一个链接显示&#34; Add Beneficiary&#34;,并允许用户这样做。

我将ng-if语句放在<a>标记中,我不确定是否正确。当我与没有受益人的用户登录时,&#34;添加受益人&#34;链接没有显示。

  • 我在这里做错了什么?

4 个答案:

答案 0 :(得分:7)

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

此外,如果没有受益人life.beneficiary.length == 0(这是正确的)可能是假的,因为life.beneficiary可能是nullundefined(这取决于您的控制器逻辑) ...但是,为了解决这个问题:

更改 ng-if="life.beneficiary.length = 0" ng-if="!life.beneficiary.length"(相当于ng-if="life.beneficiary.length == 0",但如果您的逻辑不会失败, life.beneficiarynullundefined

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

此外,建议将两个链接(<a>)包含在元素(spandiv,...中,如您所愿)中,其中包含{{1}这样的事情:

ng-repeat

答案 1 :(得分:1)

尝试更改此

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

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

答案 2 :(得分:0)

目前设置的方式,只会显示符合第一个<a>要求的ng-if标记。您的<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>

如果您想在单次重复重复下进行,则需要执行以下操作:

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

答案 3 :(得分:0)

**

  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>