<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。但是我想在重复使用后使用bird，所以我不能在div上使用ng-if="bird.type === 'bird'"。我可以检查li是否为空，然后隐藏div？当子元素为空时，在DOM中隐藏父元素
AngularJS ng-repeat handle empty list case - 这是不一样的。我不想隐藏李，如果它是空的，我想隐藏父母，我有h1 - 李空时。
你可以做到以下几点：
<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功能会得到通常被称为，但将允许您隐藏/显示鸟的标题存在。
您应根据类型过滤列表，将过滤的项目存储在范围属性中，然后使用该属性显示或隐藏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';
};
在你的例子，我建议你使用，而不是使用“NG-如果”过滤器，您应该创建这样一个过滤器：
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>
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。这里是你的样子，然后标记是什么：
使用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="[email protected]" 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>
[AngularJS纳克重复手柄空列表的情况下]（HTTP的可能的复制：//计算器。com/questions/12340095/angularjs-ng-repeat-handle-empty-list-case） – BDawg
你是在问，如果'creatures.length == 0'可以隐藏'div'吗？我不确定我是否理解你的问题。 – frosty
@frosty我想在bird.type为null时隐藏div。例如，我有.type ==='bird'，.type ==='dog'和.type ==='cat'，但我没有'fish'，所以如果fish.type === null - 李将是空的。但div和h3 - 将可见 – YoroDiallo