當子項為空時，在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>
我收到服務器的回復，我想把它放到列表中。 但是當列表為空時我需要隱藏這個div容器。 例如，如果bird.type === 'bird'不在數組中 - 我想隱藏div。 但我想在ng-repeat之后使用鳥，所以我不能在div上制作ng-if="bird.type === 'bird'" 。 我可以檢查li是否為空，然后隱藏div？
AngularJS ng-repeat處理空列表案例 - 它不一樣。 我不想隱藏li如果它是空的，我想隱藏父親我在哪里h1 - 當李是空的時候。
5 個解決方案
解決方案1
4 已采納 2016-08-05 17:14:35
您可以執行以下操作：
<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>
然后在controller / directive中你可以添加hasBirds函數。
$scope.hasBirds = function(list){
return list.filter(function(item){return item.type === 'bird'}).length > 0;
}
這個hasBirds函數會經常被調用，但是會允許你隱藏/顯示鳥類的標題。
解決方案2
2 2016-08-05 17:19:58
在您的示例中，我建議您使用過濾器而不是使用“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
2 2016-08-05 17:29:06
IMO，其中一些答案將起作用。 但它們都沒有理想的優化。 我建議您在控制器/ 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'})
};
這樣你就只能在一個地方處理一次生物陣列。 摘要周期永遠不必重新評估數組以查看是否需要更新DOM。 這是你的標記，然后看起來像：
<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
您應該根據類型篩選列表，將篩選的項存儲在范圍屬性中，然后使用該屬性顯示或隱藏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
1 2016-08-05 17:33:40
如果長度為零，使用ng-show="cats.length"使div消失。
基於對象屬性過濾內聯，如cat in creatures | filter:{type: 'cat'} as cats cat in creatures | filter:{type: 'cat'} as cats如本SO帖子所述 。
工作示例：
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>
當我刪除父本身時，是否需要刪除DOM元素的所有子元素？
[英]Do I need to delete all the children of a DOM element , when I delete the parent itself?
按下按鈕時如何將子元素隱藏在 div 元素中？ （不隱藏父母）
[英]How do I hide children inside a div element when button is pressed? (without hidding parent)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.