Lecture 17: ng-repeat

Loading...

來自 Johns Hopkins University 的課程

使用 AngularJS 创建单页应用

1362 個評分

Johns Hopkins University

使用 AngularJS 创建单页应用

1362 個評分

課程 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 17: ng-repeat11:39

Lecture 18: Filtered ng-repeat11:23

Lecture 19, Part 1: Prototypal Inheritance5:09

Lecture 19, Part 2: Prototypal Inheritance13:24

Lecture 19, Part 3: Scope Inheritance7:23

Lecture 19, Part 4: Scope Inheritance10:30

Lecture 19, Part 5: Controller As Syntax8:40

與講師見面

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

[SOUND] No

framework on the level of AngularJS would be complete without some sort of construct

to loop over our data, and output the result of that looping to the web page.

AngularJS certainly has that construct, and it's it's called ng-repeat.

And that's what we're going to learn about in this lecture.

Now we've seen directives before.

For example, ng-app is a directive while ng-controller is a directive,

ng-repeat is yet again a directive that we're going to learn about,

a directive that comes packaged together with AngularJS out of the box.

Right now I'm in my editor and

I'm in Lecture 17 inside a Full Stack-Course 5 Examples folder.

So let's go over this little shopping list app.

We have the ng-app meaning the app being shopping list App and

we have the Shopping List controller, where all the magic is going to happen.

Let's switch to app.js for a second and take a look as to what we have here.

What we have here is two arrays.

The first one is called shoppingList1 and it has one, two, three, four,

five, six, seven, eight, eight items in the shopping list.

And they're all just strings.

And we also have shoppingList2, which has also elements in it, but

the elements of shoppingList2 are actually objects.

So, it's one, two, three, four objects.

Each object has a name and a quantity property.

When we declare our module and actually declare our Shopping List Controller,

all we're doing here is obviously injecting scope as usual, but

all we're doing here is placing those arrays as a property on the scope service.

So, now we have a shoppingList1 property and we have a shoppingList2 property

that is now able to be a reference inside of our html template.

Let's go back to index.html.

And we see here the first shopping list, or

the first version of a shopping list here, is that we have an unordered list and

the LI tag has an attribute called ng-repeat.

And ng-repeat is very similar to a four each type of four loop so

the construct of item in shoppingList1 means that we're going

to be looping over shoppingList1 array or collection one array, and

each time through duration the item of that collection that is being

iterated over, is going to be equal to the item variable that we're setting up.

And in this case, right now,

we're just interpreting that item as the value of the body of the LI tag.

So each time as it's iterating, it's going to output another item that is equal

to one of the items in the shoppingList1 array.

The rest of the code so

far is just commented out and we'll get to it in a second.

So, let's go ahead to our browser and take a look here.

And you see here that we have our Shopping List and

all of our eight items output to the browser.

Let's go ahead and right-click on this Milk item and inspect it and

see what the code in HTML is actually looking like.

As you can see here, what we have here is the entry repeat

actually repeated the LI tag eight times over and over here.

Each time interpolating the item in the ray

as the contents of that particular LIM so in this case it's milk,

in this case it's donuts, cookies and so on and so forth.

Let's close that up.

And go back to our code editor.

And I'll comment a different shopping list, we'll just go ahead and

comment this out for now, and open the comments out for this one.

In this case, we're also looping through the array, except in this case,

we are looping through shoppingList2 array.

But shoppingList2, as you can remember, let's go back to app.JS,

you see shoppingList2 is a list of objects, not just a list of strings.

So in this case, each item in the loop of shoppingList2

is going to represent the object, not just the particular string.

So in this case, when we interpolate it, and we say something like Buy,

Item.quantity of item.name, we're able to

traverse the JavaScript object in its usual way using the dot notation.

And obviously interpolated with double curly braces, so if we save that and

go back to our browser, you'll see that now we're outputting Buy 2 of Milk(s).

That's really not English but

it's close enough, Buy 200 of Donuts(s) and donuts is spelled twice with an s.

Again kind of of a little bit messed up here, but it doesn't really matter,

you get the idea.

And Buy 300 of Cookies, and

obviously we're going to have a cookie party right there.

Let's go back to the code editor and now comment this out and

uncomment another way of traversing the shopping list.

In this case, what we're doing here is, we're doing exactly the same thing,

except this time around, I'd like to be able to number them one by one.

Even though we're inside of an unordered list,

I want to be able to get at the index of the iteration as we go along.

So item in shoppingList2, the ng-repeat is set up exactly the same.

Except ng-repeat directive allows us to access the looping index

variable by exposing it to the body of the tag that ng-repeat is an attribute of

by the dollar sign index.

So if we say dollar sign index and we try to interpolate that inside of the body

of the tag that ng-repeat is on, it will give us the index or

the iteration number through the loop of this collection shoppingList2.

So we are able to say index $index+1 because obviously

arrays are zero-based and we don't want to start Counting to the user from zero so

we're going to do plus 1.

So the very first item will be 1, 2 and so on and

then we'll say the same thing by item.quantity of item.name.

Let's save that and go to the browser and you see now,

every bullet now has 1, 2, 3 and 4 and these numbers came from

$index that is exposed by the ng-repeat directive.

Now obviously, if we go look at our html, you see that we're setting up watchers for

different items inside of our array that we'll looping over because double curly

braces as we learned before, sets up watchers, which means that if we change

things inside of the array, the changes should appear on the screen automatically.

And this actually includes even if you're setting up a watch to yourself for

a pretty deep value inside of the array.

Let's go ahead and create an input element,

with an ng-model that is going to watch, as I remember ng-model

sets up a watch, is going to watch a shoppingList2 but not just a whole thing.

We just want to watch the first item in it and

we want to watch the quantity of that first item.

Which means that the value inside the input element is going to directive

reflect the quantitative value of the first item in the list.

Let's save that and let's go back to the browser.

And you see here it's already appearing as 2,

and the reason it's appearing as 2 is because that's the first item on the list.

So if I add a 0 right here,

you'll see that the list automatically updates without me doing anything else.

So I could add whatever really I want in here, and

the list will update with that particular number.

We can also update the entire list by removing or adding items to the list.

Ng-repeat also watches the entire collection as the whole, and

will then re-render the view with the updated data.

So let's go ahead and do that right now.

We'll put an input field here, and

we'll say it's ng-model is equal to new item name.

And we'll put even a placeholder, so people know what that is.

Item name and we'll put another input.

And this time the ng-model is going to be new item quantity.

And the placeholder, we'll say as item quantity.

Okay, let's close up the sidebar so we could fit it a little bit better.

And one more thing is we'll add the button to be able actually to add that

new item to the list.

And we'll bind an ng-click and we'll bind it to some function called add to list.

We'll put the parens at the end and

we'll say add to list as the label for the button.

Now what we need to do is we need to actually go ahead and

implement this add to list function.

We'll copy that.

Goto app.js, let's scroll into our controller and

we'll say $scope.addToList is a function, we don't need

the name and inside that function, we'll need to create a new item and

then new item is going to be equal to an object, as we know that's objects now,

the name of which is going to be scope.newItemName,

and quantity is going to be of scope.newItemQuantity.

And you could see these are the values that we pulled out

from the newly created engine model, right?

The engine model that we've set up here created newItemQuantity and

it created newItemName.

So we're able to now reference it right here.

So once we created that new item, we need to now place it onto our array.

Our array is called scope.shoppingList2.

So we'll do that.

Scope.shoppingList2.push and we'll just say (new item).

Okay, let's save that.

Let's go back to our browser.

As you can see here we have a couple of textboxes and add to list.

So let's say rich cookie and

we'll get like 500 of them and let's get add to list.

And you can see 5, number 5 now is Buy 500 of Rich Cookie(s).

Now actually spelled properly too.

So now that we have lots of food, let's do Coursera course and

let's order three of those.

And now we have buy three Coursera courses.

You don't have to buy them, they're free.

And even though we've changed this whole list we can still affect the first

deep value which is the quantity of this first item which is milk.

So we can still say 200 more and more and so on.

So we can still watch that item and it will get automatically updated

by the watchers that were set up by AngularJS through the ng-repeat directive.

So to summarize, we learned about the ng-repeat.

And ng-repeat is a directive that extends the functionality of HTML elements

it's applied to.

And if you think carefully about it that's an incredible idea that you were able to

take a regular HTML and

actually extend the way it behaves and AngularJS achieves just that.

Ng-repeat behaves very similarly to for-each construct in other languages.

The way it works is, ng-repeat is an attribute on some element, and

then you specify some item, which is a variable, in some collection, and

collection should be some kind of a property.

Usually the scope service and each item can now be used in

interpolation as an item in the collection at a particular index of iteration.

Now ng-repeat also exposes a special $index property

to the body of its host tag.

And what it does,

is that $index holds the numeric index of the current item in the loop.

And you're able to then use it in your interpolation or

in some calculations inside of the HTML template.

探索我們的目錄

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

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

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

通過 App Store 下載

通過 Google Play 獲取