Sorting data in AngularJS Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 9 of angularjs tutorial in
this video we'll discuss sorting data in
angular to sort data in angular we use
the order by filter here is the syntax
we specify the order by expression
following that we use the pipe character
and then the name of the filter order by
this filter has got two parameters
expression and rivers reverse parameter
is optional it is an example in this
example we're using the order by filter
with the ng-repeat directive so for each
employee in employees that's our
expression following that we have the
pipe character and then the name of the
filter order by for the first parameter
expression we are passing salary as the
value so this employee data will be
sorted by salary column and for reverse
parameter we are passing a value of
false that means here the employee data
will be sorted by salary column in
ascending order so to sort data in
ascending order set river's parameter to
false to sort it in descending order set
rivers parameter to true there's another
way to sort data in ascending or
descending order that is by using plus
or minus symbol along with the column
name so use the plus symbol to sort data
in ascending and minus symbol to sort
data in descending order here's an
example so we are using the order by
with the same ng-repeat directive but
look at the column name here
we're prefixing a plus symbol with
salary column name that means this
employee data will be sorted by salary
column in ascending order let's see how
to implement sorting in an angular
application so here is what we want to
do we want to provide the opportunity to
the user to select the column and the
direction by which he wants to sort this
employee data notice at the moment
within the drop-down list we have named
column selected and the direction of
sort is ascending so the data will be
sorted by name column in ascending order
let's see how to implement this let's
slip to Visual Studio so here within our
controller function notice we are
building this employees array which
contains at the moment five employee
objects and each employee object has got
name date of birth
gender and salary properties we have
attached to that employees to the scope
object so the model is going to be
employees and within our view we are
using a table element to display that
data so we have a tea head section here
displaying the column headers name date
of birth gender and salary and tea body
section displaying the actual data so
here we are using the ng-repeat
directive looping through each employee
object in the employees model and then
displaying their name date of birth
gender and salary with date of birth we
are using a date filter so we only get
the date format in DD mmm
yyy so when we view this page in the
browser this is how the data is
displayed at the moment now the data
here is not sorted by any specific
column however we have the data in the
model you know that's the same order in
which it's present right here now let's
say we want to sort this data by name
column in ascending order to do that we
use the order by filter so here we have
our ng-repeat directive which is looking
through each employee in the employees
model so along with this I am going to
use the pipe character and then the
order by filter so we want to sort the
data by name column and let's say we
want to sort that in ascending order so
for the reverse parameter I'm passing a
value of false now if I don't pass it
the default is anyway going to be false
that means look at this when we reload
this page the data is sorted by name
column in ascending order now if you
want this data to be sorted in
descending order by that same name
column then pass true as the value for
the reverse parameter so let's save the
changes and reload this and look at that
now the data is sorted by name column in
descending order you can also do the
same thing by using plus or minus symbol
so if I use - let's use plus first so
when we use plus the data should be
sorted by name column in ascending order
if we use - the same data should be
sought
then descending order all right now
let's go ahead and implement this
example so first we want to drop down
list on our page so let's remove this
hard-coded filter value from there and
then within our page I'm going to
include a select element so order by
let's include a select element and I'm
going to specify this ngmodel directive
on the select element so the model for
the select element is going to be sort
column I'm going to add this property to
the scope object so here within our
controller function dollar scope dot
sort column and I'm going to initialize
this to name that means this employee
data will be sorted by name column you
know that's what we want when the page
initially renders so we're initializing
the sort column property that we have
attached to the scope object to name and
we have specified that as the model for
our select element and what are the
options we are going to have within our
select element first we want to sort the
data by name column so the value is
going to be named now irrespective of
whether use plus symbol or not you know
if you don't use - then the data will be
sorted by default in ascending order so
that's what I'm going to leave it as
value is going to be name and this is
what we want to display to the user name
ascending okay let's include three more
options so we want to sort by gender in
ascending order so the property name
here is going to be gender and then we
want to sort by date of birth in
ascending order so the name of the
property is going to be date of birth
and finally salary and we want to sort
by salary in descending order so since
we want to sort the data by salary in
descending order I'm going to prefix the
column name
with - okay and then along with this
ng-repeat directive here we're going to
use our order by filter so order by and
the name of the column you know by which
we want to sort the data I'm going to
use this model property sort column okay
so let's go ahead and specify that right
here all right now within the scope
object we have initialized sort column
to name so when this page you know it's
initially rendered two things should
happen first the employee data should be
sorted by name column in ascending order
and then since we also have set ng model
of the Select element to the same school
property which is sort column that
option that is this option right here
should be automatically selected within
the Select element let's look at that in
action so let's save all these changes
and reload this view look at that you
know name is selected within the
drop-down list and the data is sorted by
name column in ascending order now if I
select salary descending look at that
cell our data is sorted by salary column
in descending gender ascending and date
of birth ascending so sort is working is
expected in our next video we'll discuss
how to sort this data by clicking on the
column headers so we want to implement
bi-directional sort when I click on the
name column once we want to sort the
data by name column in ascending order
and if I click on the same name column
again we want to sort the data in
descending order by that same column
we'll see how to do that in our next
video so here we have the controller
function code the view code and then the
styles thank you for listening and have
a great day