我正在尝试使用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
(这取决于你的控制器逻辑)...但是,为了解决这个尝试:
将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>
试着改变这个
ng-if="life.beneficiary.length = 0"
在
ng-if="life.beneficiary.length == 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"> <strong>Insured?</strong> <font size=2>
<i class="fa {{data.icon}}" style="color:{{data.color}}" /> {{data.status}}
</font>
</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)">
<font ng-show="$last && !$first"> and </font>{{life.beneficiary}}
<i class="fa fa-edit" /><font ng-show="!$last">, </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
<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"> <strong>Insured?</strong> <font size=2>
<i class="fa {{data.icon}}" style="color:{{data.color}}" /> {{data.status}}
</font>
</h4>
<p>
<strong>Covered:</strong>
<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"> and </font>{{life.beneficiary}}
<i class="fa fa-edit" /><font ng-show="!$last">, </font>
</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>
</div>
</p>