Lecture 23: ng-if, ng-show and ng-hide

Loading...

來自 Johns Hopkins University 的課程

使用 AngularJS 创建单页应用

1375 個評分

Johns Hopkins University

使用 AngularJS 创建单页应用

1375 個評分

課程 5（共 6 門，Specialization Ruby on Rails Web Development）

Do you want to write powerful, maintainable, and testable front end applications faster and with less code? Then consider joining this course to gain skills in one of the most popular Single Page Application (SPA) frameworks today, AngularJS. Developed and backed by Google, AngularJS is a very marketable skill to acquire. In this course, we will explore the core design of AngularJS 1.x (latest version of AngularJS 1), its components and code organization techniques. We will enhance the functionality of our web app by utilizing dependency injection to reuse existing services as well as write our own. We will create reusable HTML components that take advantage of AngularJS data binding as well as extend HTML syntax with a very powerful feature of AngularJS called directives. We’ll set up routing so our SPA can have multiple views. We will also learn how to unit test our functionality. At the end of this course, you will build a fully functional, well organized and tested web application using AngularJS and deploy it to the cloud.

從本節課中

Module 2 - Filters, Digest Cycle, Controller Inheritance, and Custom Services

We will start this module by learning how to use Angular filters to manipulate our data into the format we want and learn how to create our own custom filters. We will then dive deep into the digest cycle, which is the process AngularJS uses to magically update our web page with the bound data from our ViewModel or the controller. Understanding this process is crucial in getting comfortable with AngularJS. We'll also see some cases where we'll need to assist that process somewhat and understand why that is. After that, we'll learn one of the most fundamental concepts in the Javascript programming language, which is Prototypal Inheritance. Clear understanding of that topic is a must before we talk about inheritance between AngularJS controllers in our application. We'll finish off the module by learning how to create our own custom Angular services as well as how to configure them. With custom Angular services we'll be able to share data across different controllers or other components in our application. We will also learn a few useful Angular directives that allow us to place looping and conditional logic direction into our HTML. You'll see that by the end of this module, you'll have the skills to create a fairly sophisticated web application that starts to use some of the more advanced software architecture techniques.

Lecture 20, Part 1: Custom Services4:25

Lecture 20, Part 2: Custom Services11:50

Lecture 21, Part 1: Custom Services with .factory()7:18

Lecture 21, Part 2: Custom Services with .factory()9:26

Lecture 22, Part 1: Custom Services with .provider()5:29

Lecture 22: Part 2: Custom Services with .provider()8:37

Lecture 23: ng-if, ng-show and ng-hide7:13

Module 2 Wrap-Up1:57

與講師見面

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[SOUND] In the last few lectures we displayed an error

message if the shopping list exceeded a certain number of items.

The error message was a property attached to the controller instance,

which itself is attached to the scope service.

However, we display the error label at all times.

If there was no error we simply display an empty string next to the label.

What we would really like to do is hide the entire containing div

if there is no error message and show it if there is one.

We have seen angular directives like ng controller, ng app, ng repeat.

In this lecture we'll take a look at another few directives called ng if,

ng show, and ng hide.

There is not much theory behind these directives, so

let's go straight to the code and see how they work.

Okay we're back in our editor and we're in the folder Luksha23,

which is located in full stack course 5 examples folder.

And this is our shopping list app that we've seen before.

And we have one controller here called ShoppingListController and

we're using controller syntax to have a label called List for it for

the inside of the controller body.

As you remember, when the user clicks on the Add Item button,

if the items array inside the shopping list service

exceeds a certain number of maximum items it will throw an exception.

Let's take a look at that code in app.js.

So if we scroll down here to the list.addItem, you'll see that if this

particular statement throws an exception, we're going to catch that error and

we're going to assign, list.errorMessage will assign the error message from that

thrown error object to the error message on the list.

So if we go back to index.html, you'll see that we're displaying here,

displaying the word error, the label error,

and then displaying the message that is supposed to come back from the controller.

As I said, what we'd really like to do is not show this whole div at all

if there's no error message.

But one way of doing it is to use the ng-if directive.

The ng-if directive takes a condition as its value.

If that condition is true, the entire div is shown.

If that condition is false, it evaluates to false,

then angular js takes the entire div out the DOM tree.

In other words, it's as if this div does not exist in our HTML.

Let's go ahead and save that and go to our browser, and we could see here,

let's bring up the Chrome developer tools.

And we'll go to Elements,

let's take a look to see if we could see that div in our HTML.

So if we open that up, we could see here that instead of our div,

right after the ordered list, we see the comment,

the HTML comment called ngIf: list.errorMessage.

And you could see it's commented out, there is no div existing.

And the reason there's no div existing is because list.errorMessage evaluated

to false.

However, if we start adding, at this point,

we'll just add some bunch of nonsense here, we'll start adding some item.

And finally when we add more than five, you'll see that that div all the sudden

sprang up into action and it's now part of the DOM, the document object model.

You see the div here, you see the ng-if and

its class error and error something class that we assigned to it.

As you could see, it's coming from styles.css and

that's why the color of our text is red.

And you could see that the div showed up.

However, there's a different way to hide this message.

Let's go back to our code editor and we'll go to the HTML template and

instead of the div with the ng-if we'll go ahead and comment that out.

And I have some pre-written code here and we'll use that right there.

And what we're using now is we're using ng show.

Ng show does exactly the same thing as ng if dash,

except that it will not remove the div from the document object model.

It will simply put special classes on that,

that Angular will know to have the div hidden.

Let's save that and go back to our browser, and let's go ahead and

add a bunch of nonsense here, and go ahead and add five items.

And we take a look here before we even edit five items,

we'll see that the div is here except it has some ng-hide on it

as one of the classes and that is why it is hidden.

In fact I'm sure if you look an ng-hide here you'll see,

it says display none and that's why it's hidden.

So as we keep adding the more and more items, add one more,

you'll see that the ng-hide class goes away from this div and

therefore it's now showing up in the browser.

Now the other directive is called ng-hide and

as you can probably guess, it's the exact opposite of ng-show.

The only difference between ng-hide and ng-show is whether or

not it's going to hide or show the element based on the true or false.

ng-show will hide the element if the value assigned to it is false.

ng-hide will show the element if the value assigned to it is false and vice versa.

Let's go ahead and save that.

You could see here that we're putting a condition here and not list error message.

In other words, we're going to hide it when list.errorMessage is false.

And since an empty string,

a value is to false, that's when we're going to hide this whole div.

Let's go back to our browser and you could see and if we scroll down here,

we could see that the div is still showing up here and

again we have ng-hide already applied to this div.

And that's because this evaluated to false, false reversed

with the exclamation point becomes true so ng-hide is true, so it's hiding the div.

So, again if we put so much nonsense here and add five items,

you'll see on the sixth item this ng-hide class will get removed.

Because list.error became true, the opposite of true is false, so

therefore it's no longer hiding our div.

So let's summarize.

ng-if is a general purpose if statement like attribute directive.

If it's value is false,

angular removes the containing element from the Document Object Model entirely.

ng-show and ng-hide attribute directives automatically attach

CSS classes to the containing element that either show or

hide the element depending obviously on their value.

The containing element however does not get

removed from the document object model.

So if for some reason you still needed to manipulate that element while it's hidden,

you can do that with ng-show and ng-hide.

But you would not be able to do that with ng-if since when its value is false,

the entire element gets taken out from the document object model.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2018 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取