What are AngularJS Tables

Sometimes a concept can be explained such a very complex way that listeners shall think it seems to very tough and may require more attention and study.

But it is not correct!

Everything can be explained and understand in easy way, which creates an image in listener’s mind that is not complex enough. Eventually, it creates interest as well.

In this article we’ll pick few topics of AngularJS which shall be required to us while programming. Let’s start with AngularJS Tables…

AngularJS Tables

This is not special except of being normal HTML table if it is static. Actual game starts when we want dynamic content to be displayed in HTML table using AngularJS, which used to be done earlier using regular JavaScript or server side programming. Let’s take an example:

In the above example, systemDetails is an AngularJS array property which holds records in JSON format as below:

{ “records”:[ {“HostName”:”Machine1″,”OS”:”Windows 10″}, {“HostName”:”Machine2″,”OS”:”Linux”} ] }


Machine1            Windows 10

Machine2            Linux

By above example we can understand, ng-repeat is perfect for displaying tables dynamically. Associated HTML element (i.e. tr) is repeated as same as number of records in array.

CSS Styles with AngularJS Tables

This styling automatically handles table’s style with alternate row styling.

Display index of table records

$index is used to show index of record which starts from 0 and increases by 1 with addition of new record.

Using $even and $odd

$even and $odd are used to show table cells on conditional basis of even or odd number of row.


Be  Connected…

Satyendra Mishra

About Satyendra Mishra

An Engineer by education, Satyendra is a PMP certified Project Manager, Author, Blogger and Learner with 13+ years of experience on Project Management, Microsoft Technologies including ASP.NET, ASP.NET MVC, C#, SharePoint (On premises & Office 365), JavaScript Framework (Angular), Xamarin for Android and related technologies. He is a person with belief, sky is limit for a hard working and dedicated individual. That’s why he devoted himself to field of Software Development and now both are growing with each other. Every year for him turned out to be best year and he received enormous support and love from his companies and his clients from around the world. Now with vast knowledge of software development and its outsourcing process, he decided to move himself into knowledge sharing. Keep a fact in your mind about the comfort level of your clients and this will make you king/queen of your area.
View all posts by Satyendra Mishra →