Dailycode.info

Short solution for short problems

AngularJS: hide or show HTML elements

AngularJS makes it really easy ti hide or show elements.

In my case I wanted to show a button depending on whether there are child models available.

So just using the ng-show it works perfect!

<buttonng-click="goToZones()"class="btn btn-block btn-info"type="button"ng-show="showZones">Zones</button>

 <brng-show="showZones"/>

When the showZones is true, button, navigation and BR is shown:

 

So the button is hidden if showZones in the $scope is false and in the same time the BR element is hidden. 

The value is set when a project is selected:

$scope.$on('selectProject',function(event, data){

    $rootScope.selectedProject = data;

    if(data !=null){

        $rootScope.showZones = data.NrOfZones>0?true:false;

        $rootScope.showSubZones =false;

    }

    else{

        $rootScope.showZones =false;

        $rootScope.showSubZones =false;

    }

 

});