Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

3.4 ngShow and ngHide

As far as animation is concerned, ngShow and ngHide are almost identical to ngClass. You'll see just how alike they are in this lesson.

3.4 ngShow and ngHide

Just as ngRepeats is very similar to ngView, ngShow, and ngHide are very similar to ngClass. In fact the only difference is the class that is added to the element, it's simply called ngHide. Now, we don't have anything to hide yet, so we need to go to our index html, and we need to add something that is going to take advantage of ng-show and ng-hide. Let's add a very simple system status. So inside of the div with a class of container for the page content, I'm going to add a div element. Let's set it's ID to system status. And we're going to use ng1-show here. We're going to base this on a value called showsystemstatus. Now normally, I would create a function on the scope kind of like what I did with toggle side bar, and then I would execute that function. But for the sake of simplicity and for time, we're just going to change the value of system show status. And as far as content is concerned let's just do status is okay. So we have the best system in the world, it is always okay. Now we just need something to show and hide that message. So let's add a link to the sidebar, let's set it class equal to sidebar-list. And then inside of here we want a href. Let's say that value is going to be hash and we want ng-click because we are going to change the value of showSystemStatus. We're going to set it to the opposite of its current value. And then as far as the content for this, let's just say System Status. So now we just need some style for this. Let's go back to our animate.cs file. So if this is what we're working in, I'm going to put the style here, I would normally do it inside of the main CSS file. So we have our system-status and let's make it absolutely positioned and we will position it on the right side of the screen so that we can see it and let's do 25 pixels and that should be fine. Let's go to the browser, let's refresh, we have our system status link, by clicking it we now see our status is okay message by clicking it again that message is gone. So we now have something that we can animate. So we will just animate that and we have the same concepts within ng-class. We have ad and ad active. We have remove and remove active. But how we use them is going to be a little confusing at first, because we have this ng-hide-add. And this is used whenever the element is being hidden, because we are adding the ng-hide class to the element. So let's first of all set up our transitions. We're going to do system-status, and then ng-hide-add. We will do system-status, and then we will add ng-hide-remove. And let's just do a simple opacity transition. As you can tell, I like opacity transitions. And let's make this rather long because there's not a lot of content here. It's just a simple text thing, so let's just do one second. That way, we can definitely tell if it's fading in or fading out. Next, let's add the selectors for add, active, and remove. This is going to set up the initial value for opacity for remove to show the element it's also going to add the final value for add active which is hiding the element. So let's do system status ng-hide add active and system status ng-hide remove. And in this we're going to set opacity to zero and then let's just copy this and paste it because now we need to set up the remove active so we'll just change add active to remove active. We will get rid of that other selector, and we will set opacity to one. That's really all that we need to do here. So let's go back to the browser, let's refresh. We will click on System Status and hopefully that will fade in. And it does. We will click on System Status once more, and that will fade out. So as you can see, ng-show and ng-hide are almost identical to the ng-class that we talked about a few lessons ago. In the next lesson we're going to look at how can we animate form validation components.

Back to the top