Скрыть родительский элемент в 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-repeat, поэтому я не могу сделать ng-if="bird.type === 'bird'" на div. Могу ли я проверить, свободен ли пуст, а затем скрыть div?

plunkr example

AngularJS ng-repeat handle empty list case - Это не то же самое. Я не хочу скрывать li, если он пуст, я хочу скрыть родителя, где у меня есть h1 - когда li пуст.

Answer 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 функция будет вызываться часто, но позволит вам скрыть/показать заголовок птиц существуют.

Answer 2

Вы должны отфильтровать список в зависимости от типа, сохранить отфильтрованные элементы в свойстве области, а затем использовать это свойство, чтобы показать или скрыть 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'; 
}; 

Answer 3

В вашем примере я советую вам использовать фильтр вместо использования «нг-если», то необходимо создать фильтр, как:

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 4

ИМО, некоторые из этих ответов будут работать. Но ни один из них не идеально оптимизирован. Я бы порекомендовал фильтровать ваши данные в функции контроллера/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> 

Answer 5

Использование ng-show="cats.length" сделать div «s исчезнет, ​​если длина равна нулю.

Фильтр встроенный на основе свойства объекта, такого как 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>