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

Dav*_*ave 3 html javascript angularjs servicenow angularjs-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>
Run Code Online (Sandbox Code Playgroud)

在上面的代码中,如果受益人的数量大于0(ng-if="life.beneficiary.length > 0"),我想列出名称并允许用户在必要时编辑它们.这部分工作正常.但是,如果受益人数等于0,那么我希望有一个"添加受益人"的链接,并允许用户这样做.

我把这些ng-if陈述放在<a>标签中,我不确定是对的.当我与没有受益人的用户登录时,"添加受益人"链接不会显示.

  • 我在这做错了什么?

lea*_*iro 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>
Run Code Online (Sandbox Code Playgroud)

此外,建议换两条链路(<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>
Run Code Online (Sandbox Code Playgroud)