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


THREE QUERIES offers easy access to information about SharePoint and associated technologies, project management, agile and scrum methodologies that helps developers, administrators, architects, technical managers, business analysts and end users. It has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing software projects of all kinds. With weekly/daily exclusive updates, we keep you in touch with the latest business, management, technology thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram, Pinterest and LinkedIn

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *