Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

FIFA world cup 2014 with Angular.js & ASP.NET – Part- II

, 24 Jun 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Dear Friends, In last post part 1 ,we learnt how to use Angular.js. Now in this post we are moving further as I shared we will do some more interesting thing here. In this demo I have created same type of JSON as we have created in last post but it has some more values […]

Dear Friends,
In last post part 1 ,we learnt how to use Angular.js.
Now in this post we are moving further as I shared we will do some more interesting thing here.
In this demo I have created same type of JSON as we have created in last post but it has some more values like
MatchDate: ‘Localtime’,
MatchNumber: ‘Match64′,
GroupName: ‘Final’,
Stadium: ‘Maracanã-EstádioJornalistaMárioFilho’,
Venue: ‘RioDeJaneiro’,
TeamName1: ‘W61′,
TeamCode1: ‘W61′,
TeamName2: ‘W62′,
TeamCode2: ‘W62′

JSONformat
Thanks to Fifa.com  for providing the information.

I created the JSON from FIFA.com’s data (I hope they will not mind it.)
Now as mention earlier, it is exactly same as we did in last post it has module, controller and groups properties.
In this we added two more features which is Order By & filter.
Firstly order by expression. So we have used order by expression in ng-repeat.

We have sorted this with matchDate with Order by expression as shown in below image

ng_Order_By
When you run it then your result will be in order by MatchDate

Match
Now what if you want to sort it by reverse date order then it is also very simple you just need to add “-“minus sign in front of MatchDate once you will do this you will get following output.

matchdate_with_ReveseOrder

Now we are interested in some specific information like particular group, particular match, and particular team so in such case we require Filter extension property.
In current example we have taken a textbox which has property ng-model. Now this ng-model value is passed in ng-repeat with filter option as shown in below image

filter_create
Now when you type value in textbox you will get filtered result on the screen as

Filter_Fifa_Result

I hope you enjoy it.

Soon I will share code with a other example.

 

Thanks & Enjoy !!!

Rajat


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rajat-Indiandotnet
Technical Lead
India India
No Biography provided
Follow on   Twitter

Comments and Discussions

 
QuestionPlease include source code as zip file PinmemberTridip Bhattacharjee26-Jun-14 21:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 25 Jun 2014
Article Copyright 2014 by Rajat-Indiandotnet
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid