There are many containers with lists that are dynamically loaded from the array that I get from Jason. There can be a lot of data and the most different, therefore I try to make check that there are no empty containers. Immediately I thought of using ng-if, it seemed most appropriate, but that was the problem.

<div> <h1>Birds</h1> <ul> <li ng-if="bird.type === 'bird'" ng-repeat="bird in creatures">{{bird.name}}</li> </ul> </div>

There are a lot of objects in the array and we need to check them one by one, so first we need to start ng-repeat, but in this case I can't hang it on the parent div. the title will be repeated in each object. I cling it to li, but in this case I’m already on the parent element is not ng-if = "bird.type === 'bird'", because it isn’t yet specified at that time. And the problem is that if there is no list, then there will be only a title on the page .. If you could check that the list is empty - and hide the parent element, is there such a possibility? Plunk example

  • if there are no elements, then creatures.length will be == 0 . here you have the condition for the block of absence of elements - Vasily Barbashev
  • @ Vasily Barbashev unfortunately it is not. Creatures always has a lot of objects, and as in this example, that on a plankr - there may be dogs and cats and birds, but here the fish that we expect may not be. but to get to the fish - you need to do ng-repeat, because we don’t know who exactly of the creatures we can have - YoroDiallo

1 answer 1

In this case, you need to filter the array. It can be implemented directly in the view, or inside the controller.

For example:

 var app = angular.module('App', []); 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' }, { name: 'Bop-Bou', type: 'cat' } ] }); 
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script> <div ng-app="App" ng-controller="Ctrl" ng-init="birds=(creatures|filter:{type:'bird'}); dogs=(creatures|filter:{type:'dog'}); cats=(creatures|filter:{type:'cat'}); fishes=(creatures|filter:{type:'fish'})"> <div ng-if="birds.length>0"> <h1>Birds</h1> <ul> <li ng-repeat="bird in birds">{{bird.name}}</li> </ul> </div> <div ng-if="dogs.length>0"> <h1>Dogs</h1> <ul> <li ng-repeat="dog in dogs">{{dog.name}}</li> </ul> </div> <div ng-if="cats.length>0"> <h1>Cats</h1> <ul> <li ng-repeat="cat in cats">{{cat.name}}</li> </ul> </div> <div ng-if="fishes.length>0"> <h1>Fishes</h1> <ul> <li ng-repeat="fish in fishes">{{fish.name}}</li> </ul> </div> </div>

  • Thanks) I asked this question on stackoverflow.com) to be honest, on small scales, their answers help, but when you need to look for a type in some.rest [0] .ino.topi [1] .type, this is more problematic) - YoroDiallo
  • @YoroDiallo, did not quite understand the beginning of the comment. The end did not understand at all :-) the only solution to the problem: pre-process the original data set. Where and how to handle does not matter. - Grundy
  • I mean that I asked this question on stackoverflow.com/questions/38794479/… , so I’ve already seen this comment)) but thanks anyway) - YoroDiallo
  • @YoroDiallo, but I have not seen this question :) - Grundy