AngularJS ng repeat directive Video Lecture - Learn and Understand AngularJS

this is part six of angularjs tutorial
in this video well discus ng-repeat
directive along the way we'll also
discuss nesting ng-repeat with an
example and each bead is similar to for
each loop in c-sharp let us understand
this with an example
here we have an employee's array notice
at the moment we have got five employees
each employee object has got first-name
lastname gender and salary properties we
want to present this data using a table
as you can see here let's see how easy
it is to do that using ng-repeat
director the first APR is to build this
model so let's flip to visual studio
within our controller I'm going to
create employee's array this array is
going to contain our employee objects
every employee object is going to have a
first name property last name gender and
finally salary
so we have our first employee object
let's include four more employee objects
in the interest of time I have already
typed the required code let's format
this a bit so we have the employees
array which is going to be the model so
let's go ahead and attach that to the
scope object alright the model is ready
now we want to present this data using a
table so within the view I am going to
include a table element so we want a
table header to display the column names
so within the table I am going to
include a tee head section and we need
for pH elements to display first name
last name gender and salary so first
name last name gender and finally salary
now let's include the tee body section
and within the body we want a row for
every employee so I'm going to include a
PR element and on this TR element I'm
going to use ng-repeat and look at the
expression that I'm going to write here
read it like this for each employee
object in what is our model our model is
employees so I'm going to use that so
for each employee in employees our model
is nothing but a collection of employee
objects now you can name this variable
here anything you want
so for each employee in employees what
do we want to do we want for TD elements
so we can display their respective first
name last name gender and salary so
let's go ahead and include a TD and to
display the employees first name we are
going to use that variable employee dot
first-name similarly let's display the
last name gender and celery
last name gender and finally salary
let's save the changes and reload the
page look at that we get the first name
last name gender salary for every
employee as expected so here we are
using the ng-repeat directive now let's
look at an example of nesting ng-repeat
and here is what we want to do we want
to display you know these three
countries and every country has got list
of cities so we want to display the
country names and city names using an
unordered list so we are going to have
you know countries array and each
country object is going to have cities
property which will be another array so
that it can contain the list of cities
belonging to that country so let's go
ahead and create our model first so
within the controller function here
let's create a variable let's call it
countries equals an array so let's
create our first country object so every
country is going to have a name property
the name of the country is going to be
UK and every country is also going to
have cities property that's going to
keep track of the cities that belong to
that country and this is going to be an
array and every city is going to have a
name property so let's say the first
city is London let's include two more
cities Manchester and finally
Birmingham okay so we have our first
country object there let's include two
more countries and in the interest of
time I've already typed the required
code so let's copy that and paste it
right here let's format this a bit so we
have three country objects UK USA and
India
so we have our countries array which is
going to be the model so let's go ahead
and attach that to the scoop object so
dollar scope dot country's equals our
array country's so the model is ready
now we want to present the data using an
unordered list so I'm going to remove
this table element from the view and
include an unordered list and then I'm
going to include a list item so within
the unordered list we want a list item
first for every country so on this list
item I'm going to use ng-repeat
equals for each country in countries
okay countries over model so what do we
want to do we want to display the
country name so I'm going to use a
binding expression country dot name and
then every country has got list of
cities belonging to it we want to
display those list of cities so I'm
going to create another unordered list
and it's going to have its own list item
and on this I'm going to use another
ng-repeat so notice here we are nesting
ng-repeat
so ng-repeat equals we already have the
country variable so this country
variable will be available in or within
this li and to any child elements and we
know that every country object has got
cities property which contains the list
of cities so here what I'm going to do
is so Li ng - repeat equals for each you
can read this as for each city object in
country dot cities so this country is
this variable so we are looking through
each country object
playing the country name and then we get
an unordered list and you know again
we're using a lie here and then looping
through each city within the city's
property of that country object okay so
then what we want to do is write the
city name out so let's use another
binding expression and display the city
name all right so let's save the changes
and reload our view and now we should
get the country names and the cities
belonging to it and here we are nesting
and you repeat how to find the index of
an item in the collection to find the
index of an item in the collection use
dollar index probably whenever you use
ng-repeat you know you get this dollar
index property and using that you can
find the index of the item so we have
you know within the array it's a
country's array we have three items UK
USA and India so UK's index is zero USA
one India two and then each country has
got list of cities an array of cities so
for London look at the index on the
extreme right here
zero one two London Birmingham
Birmingham and Manchester and look at
the parent index a parent index is
nothing but the index of its parent
element so UK index zero so you see that
here and if you look at this country USA
look at the parent index it's one
matches with the country USA index and
for Indian cities it matches with the
India index let's see how to achieve
this so to get the index of an item all
you need to do is let's say we want to
display this word index equals and I'm
going to use another binding expression
and specify dollar index let's do the
same thing for the cities as well okay
so let's save the changes and look at
this when we reload we get the index for
the countries and then the cities that
belong to each country now how to get
parent index to get the index of the
parent element there are two ways you
can use dollar parent dollar dollar
index or you can use ng in it
realize available with the parent index
value and use that variable let's look
at both ways the first let's see how to
use dollar parent dot dollar index so we
want the parent index only the cities
have caught a parent so here what I'm
going to do is before we display the
index itself I'm going to display parent
index so parent index equals I'm going
to use another binding expression dollar
parent dot dollar index and then let's
separate the parent index and the actual
item index by a comma so let's save the
changes and look at this when we reload
we get the respective parent index for
the cities okay so one way is to use
dollar parent dot dollar index the other
way is to use ng init directive and
initialize a variable with the parent
index value and then use that variable
later let's look at that in action so
here we're using ng repeat directive so
I'm going to use ng dash in it and let's
call the variable parent index you can
give it any name you want equals and
here I'm going to use dollar index and
then I can reuse this variable you know
anywhere within that element so I'm
going to use that right here instead of
the binding expression you know within
that binding expression we can use that
variable so let's copy that and paste it
right there
okay so let's save our changes and look
at this when we reload that you know it
doesn't change you know we are getting
that parent index as expected
thank you for listening and have a great
day