Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML

FIFA World Cup 2014 with Angular.js & ASP.NET – Part II

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
24 Jun 2014CPOL1 min read 9.1K   4   1
FIFA World Cup 2014 with Angular.js & ASP.NET - Part II

In 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 things here.
In this demo, I have created the same type of JSON as we have created in the 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 mentioned earlier, it is exactly the same as we did in the last post, it has module, controller and groups properties.
In this, we added two more features which are 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 the 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 the 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 the 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 the 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 another example.

Thanks & enjoy !!!

Image 7 Image 8

License

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


Written By
Team Leader
India India
I am Rajat Jaiswal from India. I am working as a Technology specialist in one of the reputed company in India with 12+ years of experience. I am a Microsoft Data Platform MVP & Alibaba Cloud MVP.
I have always had an affinity to learn something new in technology. Database, Web development, Cloud computing are the areas of my interests always.
I have been a regular contributor to technologies with more than 300+ tips. Learning & Sharing is one of my aims always. Writing blogs, delivering sessions, helping on forums is my hobby.

Comments and Discussions

 
QuestionPlease include source code as zip file Pin
Tridip Bhattacharjee26-Jun-14 21:31
professionalTridip Bhattacharjee26-Jun-14 21:31 

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

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