How to display a hidden element in AngularJS?

Question

Is it possible to have an element hidden by default (so that it does not show if JavaScript is off) and have AngularJS override the style to display it?

I have a function on the scope that should be returning an overriding style to display the element:

$scope.style = function() {
  return { "display": "block!important" };
}

The element itself has the original CSS hiding it as well as an ng-style directive:

<h4 class="original" ng-style="style()">

The CSS hides the element at first:

.original {
  display: none;
}

There is a non-working demo here .

Answer 1

It works. The actual problem is here:

ul {
  list-style-type: none;
  color: #fff;
}

White ( #fff ) text on a white background. Remove color: #fff; and it will work.

Here's a working plunker.

Also, !important does not work with ng-style .

Answer 2

You could use ng-class :

<p class="hidden" ng-class="{visible: show}">Lorem ipsum dolor</p>

Then have two CSS classes:

.hidden {
  display: none;  
}
.visible {
  display: block;
}

And add the show property to the scope (it can be an ng-model as well):

$scope.show = true;

Demo: http://jsbin.com/qibu/1/edit

Answer 3

You can try ng-class

.show {
    display: block !important;
}

<h4 class="original" ng-class="{show: isJSon}">

$scope.isJSon = true;