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

【问题标题】：Hide parent element in DOM when children are empty子元素为空时隐藏 DOM 中的父元素
【发布时间】：2016-12-12 04:17:31
【问题描述】：

<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-repeat 之后使用bird，所以我不能在 div 上制作 ng-if="bird.type === 'bird'"。我可以检查 li 是否为空，然后隐藏 div 吗？

plunkr example

AngularJS ng-repeat handle empty list case - 不一样。如果 li 为空，我不想隐藏它，我想隐藏我拥有 h1 的父级 - 当 li 为空时。

【问题讨论】：

AngularJS ng-repeat handle empty list case的可能重复
你是在问如果creatures.length == 0，如何隐藏div？我不确定我是否理解您的问题。
@frosty 我想在 bird.type 为空时隐藏 div。例如，我有 .type === 'bird'、.type === 'dog' 和 .type === 'cat'，但我没有 'fish'，所以如果 fish.type === null - li 将是空的。但 div 和 h3 - 将是可见的
@T.J. Crowder 你可以在 plunkr 中看到，如果我没有某些元素的 li 将是空的，但 h3 和 div - 不是
在下面查看我的答案。如果没有该类型的动物，它可以隐藏该部分。

标签： javascript angularjs

【解决方案1】：

您可以执行以下操作：

<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 函数会经常被调用，但可以让你隐藏/显示鸟类的航向。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

IMO，其中几个答案将起作用。但它们都没有经过理想优化。我建议在您的控制器/后链接功能中过滤您的数据。

$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>

【讨论】：

【解决方案4】：

您应该根据类型过滤列表，将过滤后的项目存储在范围属性中，然后使用该属性显示或隐藏 div。

<div ng-show="birds.length">
  <h1>Birds</h1>
  <ul>
    <li ng-repeat="bird in creatures | filter:birdType as birds">{{bird.name}}    </li>
  </ul>
</div>

然后在你的控制器中实现birdType过滤功能：

$scope.birdType = function(creature) {
    return creature.type === 'bird';
};

【讨论】：

【解决方案5】：

如果长度为零，则使用ng-show="cats.length" 使div 消失。

根据cat in creatures | filter:{type: 'cat'} as cats 等对象属性进行内联过滤，如this SO post 中所述。

工作示例：

var app = angular.module('App', []);
app.filter(birdsFilter);
function birdsFilter(creature) {
    return creature.type == 'bird';
}
app.controller('Ctrl', function($scope) {
  $scope.creatures = [
      {
        name : 'Cho-cho',
        type : 'bird'
      },
      {
        name : 'Floo-floo',
        type : 'dog'
      },
            {
        name : 'Pou-pou',
        type : 'bird'
      },
      {
        name : 'Oop-flup',
        type : 'bird'
      },
            {
        name : 'Chio-mio',
        type : 'cat'
      },
      {
        name : 'Floo-floo',
        type : 'dog'
      },
            {
        name : 'Loo-Li',
        type : 'dog'
      },
      {
        name : 'Pops-Mops',
        type : 'bird'
      },
            {
        name : 'Boo-Moo',
        type : 'dog'
      },
      {
        name : 'Iop-Pio',
        type : 'dog'
      },
            {
        name : 'Floop-cho',
        type : 'bird'
      }
      
    ]
});

<!DOCTYPE html>
<html ng-app="App">

<head>
  <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="Ctrl">
  <div ng-show="birds.length">
    <h1>Birds</h1>
    <ul>
      <li ng-repeat="bird in creatures | filter:{type: 'bird'} as birds">{{bird.name}} </li>
    </ul>
  </div>
  <div ng-show="dogs.length">
    <h1>Dogs</h1>
    <ul>
      <li ng-repeat="dog in creatures | filter:{type: 'dog'} as dogs">{{dog.name}} </li>
    </ul>
  </div>
  <div ng-show="cats.length">
    <h1>Cats</h1>
    <ul>
      <li ng-repeat="cat in creatures | filter:{type: 'cat'} as cats">{{cat.name}} </li>
    </ul>
  </div>
  <div ng-show="fishes.length">
    <h1>Fish</h1>
    <ul>
      <li ng-repeat="fish in creatures | filter:{type: 'fish'} as fishes">{{fish.name}} </li>
    </ul>
  </div>

</body>

</html>

【讨论】：