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.

Sergiu Paraschiv · Accepted Answer · 2014-02-09 11:01:14Z

2

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.

edited Feb 9, 2014 at 11:01

answered Feb 9, 2014 at 10:54

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

railsuser400 Over a year ago

The !important was the breaking point. Did not know about that.

elclanrs · Accepted Answer · 2014-02-09 10:52:56Z

1

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

answered Feb 9, 2014 at 10:52

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

2 Comments

xmarston Over a year ago

I was writing exactly this, this is the proper way to show/hide a div.

elclanrs Over a year ago

@RoyiNamir: It is hidden by default. If there's no JavaScript then Angular won't run and the ng-class attribute won't do anything.

Chen-Tsu Lin · Accepted Answer · 2014-02-09 11:00:35Z

0

You can try ng-class

.show {
    display: block !important;
}

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

$scope.isJSon = true;

answered Feb 9, 2014 at 11:00

Chen-Tsu Lin

23.3k16 gold badges57 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to display a hidden element in AngularJS?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related