How can I hide <div> elements from a view, but let them take up space using AngularJS?

Question

I have the following:

<div class="block-border"> <div class="grid-select"> <div class="clearfix"> ... ... </div> </div> </div> 

In the form area there are controls that are filled with data after loading the screen. While the population is still ongoing, I have a $ scope.loading variable that has a nonzero value. When the load ends, this value will be zero.

Is there a way to hide the controls on <div class="grid-select"> so that they are not visible. Note that I still want them to use a space, and I still want to show the div with block separators.

Answer 1

Try css' visibility: hidden; something like:

 <style> .hidden{ visibility:hidden; } </style> <div class="grid-select" ng-class="{'hidden': loading!=0 }"> 

Example: http://jsfiddle.net/cherniv/YJ2R7/

Answer 2

Angular markup:
<div class="grid-select" ng-class="{'isLoading': loading}">

CSS
.grid-select {visibility: hidden;}
.isLoading {visibility: visible;}