Sorting data in AngularJS

Показать описание

angularjs order data
angularjs orderby filter example
angularjs ng-repeat orderby example
angularjs filter orderby date
angularjs orderby reverse
angularjs orderby ascending
angularjs filter orderby descending

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss how to implement sorting in AngularJS. This is continuation to Part 8. Please watch Part 8 from AngularJS tutorial for beginners before proceeding.

To sort the data in Angular
1. Use orderBy filter
{{ orderBy_expression | orderBy : expression : reverse}}
Example : ng-repeat="employee in employees | orderBy:'salary':false"
2. To sort in ascending order, set reverse to false
3. To sort in descending order, set reverse to true
4. You can also use + and - to sort in ascending and descending order respectively
Example : ng-repeat="employee in employees | orderBy:'+salary'"

Let us understand sorting data with an example.

The dropdownlist shows the columns and the direction we want to sort
When a dropdownlist item is selected, the table data should be sorted by the selected column

var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {

var employees = [
{ name: "Ben", dateOfBirth : new Date("November 23, 1980"), gender: "Male", salary: 55000 },
{ name: "Sara", dateOfBirth: new Date("May 05, 1970"), gender: "Female", salary: 68000 },
{ name: "Mark", dateOfBirth: new Date("August 15, 1974"), gender: "Male", salary: 57000 },
{ name: "Pam", dateOfBirth: new Date("October 27, 1979"), gender: "Female", salary: 53000 },
{ name: "Todd", dateOfBirth: new Date("December 30, 1983"), gender: "Male", salary: 60000 }
];

});

[!DOCTYPE html]
[head]
[title][/title]
[/head]
[body ng-app="myModule"]
[div ng-controller="myController"]
Sort By :
[select ng-model="sortColumn"]
[option value="name"]Name ASC[/option]
[option value="+dateOfBirth"]Date of Birth ASC[/option]
[option value="+gender"]Gender ASC[/option]
[option value="-salary"]Salary DESC[/option]
[/select]
[br /][br /]
[table]
[thead]
[tr]
[th]Name[/th]
[th]Date of Birth[/th]
[th]Gender[/th]
[th]Salary[/th]
[/tr]
[/thead]
[tbody]
[tr ng-repeat="employee in employees | orderBy:sortColumn"]
[td]
[/td]
[td]
[/td]
[td]
[/td]
[td]
[/td]
[/tr]
[/tbody]
[/table]
[/div]
[/body]
[/html]

body {
font-family: Arial;
}

table {
border-collapse: collapse;
}

td {
border: 1px solid black;
padding: 5px;
}

th {
border: 1px solid black;
padding: 5px;
text-align: left;
}

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Рекомендации по теме

Комментарии

These are the best tutorial videos I found on the entire internet .. He is totally awesome.

Keep it up!

zahirabs

These videos are amazing and a better resource than many paid services. Thank you Kudvenkat.

ianc.

Dear Venkat
Thank you so much for your amazing video tutorials. You know how to teach and you know the best order of concepts to bring on the table.

mehdikhosravi

You're a very good teacher Kudvenkat. I'm so happy I have found your videos. Fully explained, detailed and easy to follow, very well organized. Thank you for sharing your expertise.

YOUTUBE_IS_WOKE

Very Good tutorials. All your tutorials are best guide to developers. Thanks

sundarkartick

These tutorials are fantastic. Thank you for making them!

chrisfreakinp

Thanks a billion.Greetings from Bangladesh.You are great.

raqibul

Thank you Venkat, greetings from the Dominican Republic, keep up with the good work!

MrJcyank

Your tutorials are really great. They are really easy to understand. You have put in a lot of hardwork as is evident from the quality of teaching in these videos .

asifkamranmalick