使用Angular隐藏数据为空的元素

Question

Here is code pen demo

如果x.phone2为空，则要隐藏在元素下方。

<div class="telePhone"  ><strong>Phone2 :</strong> {{x.phone2}}</div>

Answer 1

您可以使用ng-if（docs）：

<div class="telePhone"  ng-if="x.phone2"><strong>Phone2 :</strong> {{x.phone2}}</div>

Updated code pen.

Answer 2

<div class="telePhone" 
     ng-if="x.phone2">
  <strong>Phone2 :</strong> {{x.phone2}}
</div>

Answer 3

如果想隐藏它并且不需要双向绑定使用：

<div class="telePhone" ng-if="x.phone"><strong>Phone2 :</strong> {{x.phone2}}</div>

如果您仍需要双向绑定使用：

<div class="telePhone" ng-show="x.phone"><strong>Phone2 :</strong> {{x.phone2}}</div>

使用ng-if会降低开销，但如果需要显示div，如果x.phone值发生变化，则需要使用ng-show。