Hi mahesh213,
Since you are dynamically populate columns and rows it is nopt possible to use filter.
So to display the Date properly you need to convert it to Date before assigning to scope.
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployees()
{
NorthwindEntities entities = new NorthwindEntities();
var employees = entities.Employees
.Select(x => new
{
Id = x.EmployeeID,
Name = x.FirstName + " " + x.LastName,
DOB = x.BirthDate,
City = x.City,
Country = x.Country
}).ToList();
return Json(employees, JsonRequestBehavior.AllowGet);
}
}
View
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", []);
app.controller("MyController", ['$scope', '$http', function ($scope, $http) {
$http.get("/Home/GetEmployees")
.then(function (response) {
for (var i = 0; i < response.data.length; i++) {
// Loop through each property in the Array.
for (var property in response.data[i]) {
if (response.data[i].hasOwnProperty(property)) {
var resx = /Date\(([^)]+)\)/;
// Checking Date with regular expresion.
if (resx.test(response.data[i][property])) {
// Setting Date in dd/MM/yyyy format.
response.data[i][property] = ConvertJsonDateToDate(response.data[i][property]);
}
}
}
}
$scope.Employees = response.data;
});
function ConvertJsonDateToDate(date) {
var parsedDate = new Date(parseInt(date.substr(6)));
var newDate = new Date(parsedDate);
var month = ('0' + (newDate.getMonth() + 1)).slice(-2);
var day = ('0' + newDate.getDate()).slice(-2);
var year = newDate.getFullYear();
return day + "/" + month + "/" + year;
}
} ]);
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table class="table table-responsive">
<thead>
<tr>
<th ng-repeat="(header, value) in Employees[0]">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in Employees">
<td ng-repeat="cell in row">{{cell}}</td>
</tr>
</tbody>
</table>
</div>
</body>
Screenshot
