7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 ng-show and mg-hide

What is a directive? We’ll begin a tour of some of the directives that Angular provides out of the box with ng-show and ng-hide, and how to provide a default value to a model.

3.1 ng-show and mg-hide

In the last video we looked at Angular controllers and got to know. Now we're going to learn about office directives, ng-show and ng-hide. But first what exactly is a directive? Well, a directive is a way for us to teach HTML a new trick. It can be something as simple as ng-show and hide, which lets us show and hide areas of the dawn based on some data from a model that we specify. They can go all the way up to reusable components like a tab module that you can just drop straight into your page. And will work using the content that you specify, but completely transform the dom into something that's like a workable set of tabs. Later on in the series, we will take a look at creating our own directives. But for now, I'll just show you around some of the really useful Angular ones. Remember all of these come pre-fixed with ng-, and that's how you know that you're using something from Angular. Angular's not on the page. It hasn't been instantiated. So I'm going to head over to the Angular website and grab the script tag from one of their examples. I'll drop it into the page here, and then add the ng app attributes to the HTML tag. So that will instantiate Angular on the page. So what I'd like to do is have a check box that shows and hides a little area of dom. First I'm going to create the check box, so I'll create a div, and then an input with it's type as check box. And then we'll create a label. And we're gonna create a show label. So when this box is ticked, it's gonna show an area of dom a bit further down. So I'll create that now. Hello world. So on this piece of dom we need to add the directive. Directives can be new element names. They can also be attributes, and they can also reside in the class attribute of an element. Angular is happy to work with any of those. Certain directives are designed to work in different ways, so a tabs module, or tabs directive, might work with an element name. Whereas something like ng-show will only work as an attribute. So I'm going to add ng-show to this div, and say that we want this to show and hide based on the value of the check box. The check box doesn't have a model yet, so we'll add it. Ng model is checked. So the value of the tick box is stored in the checked model that we can use somewhere else in the application. So I'll just drop the word check into ng-show. And you can see that now hello world is not showing up. But when I tick the box, it appears. Angular knows about check boxes and a whole range of other inputs, and so it can handle the checked and unchecked state of the check box accordingly. The ng-show attribute is looking at the value of the model to see if its truthy or falsey. If it's a truthy, it'll show the error of dom that it's associated with. If not, it'll hide it. The inverse of ng-show is ng-hide. So if I just flip this out for ng-hide, you can see that now by default, hello world appears, but when I tick this, it disappears. I better change the label here, because it's a bit confusing. So I tick hide, and it disappears. Untick hide, and it reappears. We can even databind inside this ng-hidden div. So I'll add a new div with a new input inside it, make it a text box, and say it's form a name. We'll change the model to be name. And then add the name in here to the dom. So, the name has no value. But as we update it, you can see updates down there. But you can see there's a problem here because, when there's no value in there nothing appears here, and this looks a bit weird. We've got hello comma, space and an exclamation mark. It'd be better if we could provide a default value for this area of dom or this template so that we never have this problem. Remember that I said that this was just JavaScript? That means we can use a JavaScript expression to provide a default when there's no value in the name model. So I'll just use the or operator, and add a word in quotes, like, world. And you can see that, now, it appears. But as soon as I type dom, it swapped out for the contents of the name model. And I can show and hide this area of dom still. The or operator is just checking whether or not there's a value in name, and if there isn't, it defaults to using the word world in place of the name model. So that's just a brief introduction to our first couple of directives, ng-hide and ng-show. Remember, directors are just a way to teach HTML new tricks, and the few directives we'll be going over in the next new video are just a few things that Angular has taught HTML for us to get started with. And later on we'll create our own.

Back to the top