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 disabled), and in AngularJS redefine the style to display it?

I have a function in an area that should return an override style to display an element:

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

The element itself has its own CSS code, as well as a directive ng-style:

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

CSS first hides the element:

.original {
  display: none;
}

There is a broken demonstration here .

Answer 1

It works. Actual problem here:

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

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

.

, !important ng-style.

Answer 2

ng-class:

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

CSS:

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

show ( ng-):

$scope.show = true;

: 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;