CODEWITHSUNDEEP
javascriptcssangularjs
railsuser400
railsuser400

Reputation: 1023

How to display a hidden element in AngularJS?

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.

Upvotes: 4

Views: 2735

Answers (3)

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10163

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.

Upvotes: 2

Chen-Tsu Lin
Chen-Tsu Lin

Reputation: 23244

You can try ng-class 

.show {
    display: block !important;
}

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

$scope.isJSon = true;

Upvotes: 0

elclanrs
elclanrs

Reputation: 94131

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

Upvotes: 1

Related Questions