{"id":6970,"date":"2015-09-22T12:00:08","date_gmt":"2015-09-22T09:00:08","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6970"},"modified":"2017-12-19T16:41:23","modified_gmt":"2017-12-19T14:41:23","slug":"angular-js-grid-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-grid-example\/","title":{"rendered":"Angular.js Grid Example"},"content":{"rendered":"

We all know that Angular is the most famous JavaScript framework, at this time and one of the main reasons that lead it to the top is that it provides many modules<\/a>, ready to ease your development effort. So, what about tables? Is there any angular module, in order to avoid using the old-stylish HTML markup?<\/p>\n

1. Introduction<\/h2>\n

Obviously, there are many more-specific modules around the market, so table-related exist for sure, too.
\n 
\n 
\n 
\n 
\n[ulp id=’LXJcMJZXSsqGXYW8′]<\/p>\n

2. A Basic Example<\/h2>\n

First of all, let’s take a look on a very basic table creation with Angular, without using any external module. This will contain two rows for the first and last name, an auto-updated field for representing the full name of the customer, according to the input provided and some ratings of the customer, according to a predefined set of cars. The above describe a situation as the following screenshot depicts:<\/p>\n

\"Figure<\/a>
Figure 1. Basic Angular.js table<\/figcaption><\/figure>\n

A small parenthesis before delving deeper in the javascript explanation of the above snippet: There is a common case that one may want his table to be displayed in a zebra-stylish format. According to a clean Angular app (without using any table modules), this is feasible by using the CSS3 :nth-child() Selector<\/a>.<\/i><\/p>\n

\r\n<html>\r\n<head>\r\n<title>Angular.js Table<\/title>\r\n<script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.5\/angular.min.js"><\/script>\r\n<style>\r\ntable, th , td {\r\n  border: 1px solid grey;\r\n  border-collapse: collapse;\r\n  padding: 5px;\r\n}\r\ntable tr:nth-child(odd) {\r\n  background-color: #f2f2f2;\r\n}\r\ntable tr:nth-child(even) {\r\n  background-color: #ffffff;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>Angular.js Simple Table<\/h2>\r\n<div ng-app="mainApp" ng-controller="customerController">\r\n<table border="0">\r\n<tr>\r\n\t<td>First name:<\/td><td><input type="text" ng-model="customer.firstName"><\/td>\r\n<\/tr>\r\n<tr>\r\n\t<td>Last name: <\/td><td><input type="text" ng-model="customer.lastName"><\/td>\r\n<\/tr>\r\n<tr>\r\n\t<td>Full name: <\/td><td>{{customer.fullName()}}<\/td>\r\n<\/tr>\r\n<tr><td>Expectations:<\/td><td>\r\n<table>\r\n   <tr>\r\n      <th>Car<\/th>\r\n      <th>Rating<\/th>\r\n   <\/tr>\r\n   <tr ng-repeat="rating in customer.ratings">\r\n      <td>{{ rating.car }}<\/td>\r\n      <td>{{ rating.mark }}<\/td>\r\n   <\/tr>\r\n<\/table>\r\n<\/td><\/tr>\r\n<\/table>\r\n<\/div>\r\n<script>\r\nvar mainApp = angular.module("mainApp", []);\r\n\r\nmainApp.controller('customerController', function($scope) {\r\n   $scope.customer = {\r\n      firstName: "",\r\n      lastName: "",\r\n      ratings:[\r\n         {car:'BMW 316 E46', mark:77},\r\n         {car:'BMW 316 E92', mark:89},\r\n         {car:'BMW M3 E92', mark:94},\r\n\t\t {car:'BMW M3 e46', mark:90},\r\n\t\t {car:'BMW X6', mark:85}\r\n      ],\r\n      fullName: function() {\r\n         var customerObject;\r\n         customerObject = $scope.customer;\r\n         return customerObject.firstName + " " + customerObject.lastName;\r\n      }\r\n   };\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Having read the fore-mentioned parenthesis, everything according to the style of this example should be clear enough, so let’s get into the table instance.
\n 
\nLines 24 and 27 bind the user’s input for first and last name to the controller (in our case, it is named as “customerController”), by using a $scope<\/a><\/code> object. This is done using the ng-model<\/a><\/code> directive, which indeed has many features, but the one that is helpful here is that it binds the view into the model, which other directives such as input, textarea or select require.<\/p>\n
Here are the rest features for the ng-bind<\/code> directive:<\/p>\n