AngularJS - Hide div when list is empty

Question

I currently have the following :

<div class="row">
<!-- Banners -->
<h2 class="mt15">Banners</h2>
<div class="col-sm-3 ml5 mt5" ng-repeat="banner in banners" ng-if="!banner.public">
    <ul class="rdopts form-group">
        <li class="rdopt opt mb10">
            <label class="btn btn-danger btn-sm w100pc">
                <input type="radio" name="banner_option" autocomplete="off" ng-model="vm.editModel.banner" value="{{banner.file}}" ng-checked="{{banner.file === main_image_css_file}}">{{banner.name}}
            </label>
        </li>
    </ul>
</div>

Currently, I have both public and private banners in the banner list. The banner.public property does this distinction. What I currently need to do is hide the whole div when I don't have any element on the list, given that the list only shows the banners that respect the ng-if="!banner.public" condition?

Any idea on how can I do this using Angular?

Clarification: What I want to do is to hide the whole row div when I don't have any element on the list that fills the ng-if="!banner.public" condition.

Answer 1

You should use filter method for your list .

<div class="row" ng-if="verify()">
<!-- Banners -->
<h2 class="mt15">Banners</h2>
<div class="col-sm-3 ml5 mt5" ng-repeat="banner in banners" ng-if="!banner.public">
  <ul class="rdopts form-group">
    <li class="rdopt opt mb10">
        <label class="btn btn-danger btn-sm w100pc">
            <input type="radio" name="banner_option" autocomplete="off" ng-model="vm.editModel.banner" value="{{banner.file}}" ng-checked="{{banner.file === main_image_css_file}}">{{banner.name}}
        </label>
    </li>
</ul>
</div>

JS

$scope.verify=function(){
    var result=$scope.banners.filter(function(banner){
            return banner.public;    
    });
    return result.length!=0;
};

Answer 2

<div class="col-sm-3 ml5 mt5" ng-repeat="banner in banners" ng-hide="banner.public.length == 0">
<ul class="rdopts form-group">
    <li class="rdopt opt mb10">
        <label class="btn btn-danger btn-sm w100pc">
            <input type="radio" name="banner_option" autocomplete="off" ng-model="vm.editModel.banner" value="{{banner.file}}" ng-checked="{{banner.file === main_image_css_file}}">{{banner.name}}
        </label>
    </li>
</ul>

you can use ng-hide or ng-show

Answer 3

Try this:

<div class="col-sm-3 ml5 mt5" ng-repeat="banner in banners" ng-if="banner.public.length!=0">
<ul class="rdopts form-group">
    <li class="rdopt opt mb10">
        <label class="btn btn-danger btn-sm w100pc">
            <input type="radio" name="banner_option" autocomplete="off" ng-model="vm.editModel.banner" value="{{banner.file}}" ng-checked="{{banner.file === main_image_css_file}}">{{banner.name}}
        </label>
    </li>
</ul>
</div>

ng-if is appropriate in this case as it will not render the HTML in the view ie, you cannot see the HTML during inspect element.

Answer 4

You just need to check the length of the array with ng-if='banner.public.length' , if that is available then that will be attached to the DOM otherwise it will be detached:

 var app = angular.module('demoapp',[]); app.controller('demoCtrl', function($scope){ $scope.banners = [{"public":[]}]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <div ng-app='demoapp'> <div ng-controller='demoCtrl'> demoapp <ul> <li ng-repeat='banner in banners' ng-if='banner.public.length'>{{banner.public}}</li> </ul> </div> </div> 

Answer 5

From what I gather, you have a single list of banners. A banner can either be public or private. Depending on how you are representing banner in your controller. Try the following:

Assuming banners as:

$scope.banners = [{public: true}, {public: false}];

You can have a function in your controller as:

$scope.hasPublic = (banners) => {
    var hasPublic = false;
    banners.forEach((banner) => {
        if (banner.public === true) hasPublic = true;
    });
    return hasPublic;
}

<div class="row" ng-if="hasPublic(banners)">
    <h2 class="mt15">Banners</h2>
    <div class="col-sm-3 ml5 mt5" ng-repeat="banner in banners" ng-if="banner.public">
        <!--- Rest of the code here -->
    </div>
</div>