在Ionic+AngularJS中隐藏嵌套数组内的空元素

嘿，我来帮你梳理下当前遇到的问题，以及对应的解决方案：

问题根源分析 #

1. 稀疏数组的坑：从你给出的数组结构来看，cart.item是稀疏数组（比如第一个cart的item数组有索引0和2，中间索引1是空缺的），或者存在空对象。当你用ng-repeat="item in cart.item track by $index"时，Angular会遍历数组的每一个索引位置，包括那些没有有效数据的空缺位，这时候对应的item可能是undefined或者空对象，导致显示异常。
2. cart.item.length判断失效：稀疏数组的length是取最大索引值+1，比如第一个cart的item数组length是3（因为最大索引是2），所以cart.item.length > 0永远为true，无法过滤掉包含空元素的数组。
3. ng-if="item.name"未生效：如果空元素是{}（空对象），那么item.name是undefined，理论上ng-if会隐藏，但如果你的数组里存在一些空对象其实带有name空值（比如{name: ''}），或者ng-repeat的遍历逻辑把空缺位也当成了有效项，就会导致所有元素都显示。

可行解决方案 #

方案1：提前过滤数据源（推荐） #

在把购物车数据绑定到视图之前，先过滤掉无效的item项，从根源上解决问题。在你的Angular控制器里添加这段处理逻辑：

// 假设你的原始购物车数据是carts
$scope.carts = carts.map(cart => {
  // 过滤掉item数组里的空值、undefined、空对象，确保保留有有效属性的项
  cart.item = cart.item.filter(item => {
    return item && Object.keys(item).length > 0 && item.name && item.count;
  });
  return cart;
});

这样处理后，cart.item里只会保留有有效name和count的商品项，后续视图渲染就不会出现空元素了。

方案2：在视图层直接过滤 #

如果不想修改数据源，可以在ng-repeat里结合ng-if来过滤无效项：

<div ng-repeat="cart in carts" ng-if="cart.item && cart.item.filter(item => item && item.name).length > 0">
  <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" ng-if="item && item.name && item.count">
    <ion-delete-button class="ion-minus-circled" ng-click="removeFromCart(item,cart.id)"></ion-delete-button>
    {{item.count}}x {{item.name}}
    <!-- 注意：你原来的{{item.length}}应该是笔误吧？item是商品对象，不存在length属性，建议改成实际需要展示的字段（比如价格） -->
  </ion-item>
</div>

这里父级的ng-if会先判断当前meal分组是否有有效商品，子级的ng-if则确保每个item都有必要的属性才显示。

额外提示 #

• 避免使用稀疏数组：尽量让你的cart.item是连续的数组，不要出现索引空缺的情况，这样后续的数组操作和视图渲染都会更顺畅。
• 检查HTML笔误：你代码里的{{item.length}}应该是写错了，item是商品对象，不存在length属性，建议替换成实际需要展示的字段（比如价格{{item.price}}）。

内容的提问来源于stack exchange，提问作者Margok