使用AngularJS隐藏嵌套数组中的空槽

Question

在我的离子应用中，我想展示购物车。我的问题是我的嵌套数组中的空对象。

我的数组看起来像这样：

array [0:{id:0,
          name:meal,  
          item:[0:{id:0,name:pizza0,count:1},
                2:{id:2,name:pizza2,count:3}]}
       1:{id:1,
          name:meal,  
          item:[0:{id:0,name:drink0,count:1},
                1:{id:1,name:drink1,count:5}]}
       ]

我的HTML代码如下所示：

<div ng-repeat="cart in carts">
    <ion-item class="item-stable">
      &nbsp;<!-- breaking space-->
      {{cart.name}}
    </ion-item>
    <ion-item class="item-accordion" ng-repeat="item in cart.item track by $index">
        <ion-delete-button class="ion-minus-circled" ng-click="removeFromCart(item,cart.id)"></ion-delete-button>
        {{item.count}}x {{item.name}} - {{item.length}}
    <ion-item>

结果如下：

我尝试使用ng-if：

隐藏空数组

1. ng-if="cart.item.length > 0"
2. ng-if="item.name"

使用第一个，没有项目显示（可能是因为cart.item.length未定义） 随着第二个项目的显示。

我做错了什么？有没有更好的方法来隐藏空数组？

Answer 1

您可以使用带有ngIf指令的安全导航操作符。 在div标签中使用ngIf，如下所示：

* NG-如果=＆＃34;项目＆＃34;

这只会隐藏空白项目，只显示包含数据的项目。