子元素为空时隐藏DOM中的父元素

Question

<div>
  <h1>Birds</h1>
  <ul>
    <li ng-if="bird.type === 'bird'"
        ng-repeat="bird in creatures">{{bird.name}}</li>
  </ul>
</div>

我有一个来自服务器的响应，我想把它放到列表中。但是当列表为空时，我需要隐藏这个div容器。例如，如果bird.type==='bird'不在数组中-我想隐藏div。但是我想在ng之后使用bird重复，所以我不能使ng if=“bird.type=='bird'在div上。我可以检查li是否为空，然后隐藏div吗？

普朗克例子

AngularJS ng-重复处理空列表大小写-这是不一样的。如果li是空的，我不想隐藏li，我想在li是空的时候隐藏父元素h1。

Answer 1

依我看，其中几个答案会奏效。但是没有一个是理想优化的。我建议在控制器/后链接功能中过滤您的数据。

$scope.animals = {
    dogs: $scope.creates.filter(function(a){return a.type == 'dog'}),
    cats: $scope.creates.filter(function(a){return a.type == 'cat'}),
    birds: $scope.creates.filter(function(a){return a.type == 'bird'}),
    fishes: $scope.creates.filter(function(a){return a.type == 'fish'})
};

这样你只能在一个地点处理一次生物阵列。摘要周期将永远不必重新评估数组以查看是否需要更新DOM。下面是您使用的标记的外观：

<div ng-if="animals.birds.length">
  <h1>Birds</h1>
  <ul>
    <li ng-repeat="bird in animals.birds">{{bird.name}}</li>
  </ul>
</div>

Answer 2

在您的示例中，我建议您使用过滤器，而不是使用"ng-if"，您应该创建一个过滤器，如：

angular.module('moduleName').filter(birdsFilter);
function birdsFilter(creature) {
    return creature.type == 'bird';
}

使用过滤器，您可以如下方式重写代码：

<div ng-hide="birds.length">
  <h1>Birds</h1>
  <ul>
    <li ng-repeat="bird in birds = (creatures | filter:birdsFilter)">{{bird.name}}</li>
  </ul>
</div>

Answer 3

您可以执行以下操作：

<div ng-if="hasBirds(creatures)">
  <h1>Birds</h1>
  <ul>
    <li ng-if="bird.type === 'bird'"
        ng-repeat="bird in creatures">{{bird.name}}</li>
  </ul>
</div>

然后在控制器/指令中，您可以添加hasBirds函数。

$scope.hasBirds = function(list){
    return list.filter(function(item){return item.type === 'bird'}).length > 0;
}

此hasBirds函数将经常被调用，但允许您隐藏/显示存在的鸟类的标题。