当子项为空时，在DOM中隐藏父元素
[英]Hide parent element in DOM when children are empty
问题描述
<div>
<h1>Birds</h1>
<ul>
<li ng-if="bird.type === 'bird'"
ng-repeat="bird in creatures">{{bird.name}}</li>
</ul>
</div>
I have a response from the server and I want to put it into the list. 
我收到服务器的回复，我想把它放到列表中。 But when the list is empty I need to hide this div container. 但是当列表为空时我需要隐藏这个div容器。 For example if bird.type === 'bird' is not in the array - I want to hide div. 例如，如果bird.type === 'bird'不在数组中 - 我想隐藏div。 But I want to use bird after ng-repeat so I cant make ng-if="bird.type === 'bird'" on div . 但我想在ng-repeat之后使用鸟，所以我不能在div上制作ng-if="bird.type === 'bird'" 。 Can I check if li is empty, then hide the div? 我可以检查li是否为空，然后隐藏div？
AngularJS ng-repeat handle empty list case - It's not the same. AngularJS ng-repeat处理空列表案例 - 它不一样。 I don't want to hide li if it empty, I want to hide parent where I have h1 - when li is empty. 我不想隐藏li如果它是空的，我想隐藏父亲我在哪里h1 - 当李是空的时候。
5 个解决方案
解决方案1
4 已采纳 2016-08-05 17:14:35
You could do the following: 您可以执行以下操作：
<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>
And then in controller/directive you can add the hasBirds function. 然后在controller / directive中你可以添加hasBirds函数。
$scope.hasBirds = function(list){
return list.filter(function(item){return item.type === 'bird'}).length > 0;
}
This hasBirds function would get called often, but would allow you to hide/show the heading of the birds exist. 这个hasBirds函数会经常被调用，但是会允许你隐藏/显示鸟类的标题。
解决方案2
2 2016-08-05 17:19:58
In your example I advise you to use a filter instead of using "ng-if", you should create a filter like: 在您的示例中，我建议您使用过滤器而不是使用“ng-if”，您应该创建一个过滤器，如：
angular.module('moduleName').filter(birdsFilter);
function birdsFilter(creature) {
return creature.type == 'bird';
}
With the filter you can rewrite your code like this: 使用过滤器，您可以像这样重写代码：
<div ng-hide="birds.length">
<h1>Birds</h1>
<ul>
<li ng-repeat="bird in birds = (creatures | filter:birdsFilter)">{{bird.name}}</li>
</ul>
</div>
解决方案3
2 2016-08-05 17:29:06
IMO, several of these answers will work. IMO，其中一些答案将起作用。 But none of them are ideally optimized. 但它们都没有理想的优化。 I would recommend filtering your data in your controller/postlink function. 我建议您在控制器/ postlink函数中过滤数据。
$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'})
};
This way you would only ever process the array of creatures one time, in one spot. 这样你就只能在一个地方处理一次生物阵列。 The digest cycle would never have to re-eval the array to see if it needed to update the DOM. 摘要周期永远不必重新评估数组以查看是否需要更新DOM。 Here is what you markup with look like then: 这是你的标记，然后看起来像：
<div ng-if="animals.birds.length">
<h1>Birds</h1>
<ul>
<li ng-repeat="bird in animals.birds">{{bird.name}}</li>
</ul>
</div>
解决方案4
1 2016-08-05 17:14:06
You should filter the list based on the type, store the filtered items in a scope property then use that property to show or hide the div. 您应该根据类型筛选列表，将筛选的项存储在范围属性中，然后使用该属性显示或隐藏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>
Then implement the birdType filter function in your controller: 然后在控制器中实现birdType过滤器功能：
$scope.birdType = function(creature) {
return creature.type === 'bird';
};
解决方案5
1 2016-08-05 17:33:40
Using ng-show="cats.length" to make div 's disappear if length is zero. 如果长度为零，使用ng-show="cats.length"使div消失。
Filter inline based on object property like cat in creatures | filter:{type: 'cat'} as cats 基于对象属性过滤内联，如cat in creatures | filter:{type: 'cat'} as cats cat in creatures | filter:{type: 'cat'} as cats as discussed in this SO post . cat in creatures | filter:{type: 'cat'} as cats如本SO帖子所述 。
WORKING EXAMPLE: 工作示例：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.