如果符合条件,我尝试使用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,那么我希望有一个链接显示&#34; Add Beneficiary&#34;,并允许用户这样做。
我将ng-if
语句放在<a>
标记中,我不确定是否正确。当我与没有受益人的用户登录时,&#34;添加受益人&#34;链接没有显示。
答案 0 :(得分:7)
问题是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
,...中,如您所愿)中,其中包含{{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"> <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>
如果您想在单次重复重复下进行,则需要执行以下操作:
<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>
答案 3 :(得分:0)
**
或者,您也可以使用这种优化的逻辑。
如果受益人长度为0,则链接将被隐藏,否则它将显示。
**
<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>