我正在尝试使用 ng-if
在满足条件时显示某些行,但似乎不能让它 100% 正确工作。
<div style="margin-bottom: 1em;">
<h4><!-- content omitted for brevity--></h4>
<p>
<strong>Covered:</strong>
<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 <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
</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 </a>
</span>
</p>
关于javascript - 如果满足条件,使用 ng-if 显示某些内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43216454/