Dispaly data and html using angularjs in MVC
Hi,Iam new to MVC and AngularJs. I want to display data from database in table Format.
I have created employee table and connected using Entity frameworks Database First method.following is my working code.
problem is it display the table header first and display records later.there is some seconds gap.
Employee Controller
public class EmployeeController : Controller
{
ExerciseEntities1 Db = new ExerciseEntities1();
// GET: /Employee/
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployee()
{
var emp = Db.Employees.ToList();
return Json(emp, JsonRequestBehavior.AllowGet);
}
}
Model Class
public partial class Employee
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Company { get; set; }
}
View
<div ng-app="mvcapp" ng-controller="DemoController">
<form name="myform">
<table>
<tr>
<th>Id</th>
<th>
First Name
</th>
<th>
LastName
</th>
<th>
Company
</th>
</tr>
<tr ng-repeat="empModel in employees">
<td>{{empModel.Id}}</td>
<td>{{empModel.FirstName }}</td>
<td>{{empModel.LastName }}</td>
<td>{{empModel.Company}}</td>
</tr>
</table>
</form>
</div>
<style>
input[type=button][disabled=disabled] {
opacity: 0.65;
cursor: not-allowed;
}
table tr th {
padding: 10px 30px;
}
table tr td {
padding: 10px 30px;
}
</style>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
var angular = angular.module('mvcapp', []);
angular.controller('DemoController', function ($scope, $http) {
GetAllData();
$scope.isDisabledupdate = true;
//Get All Employee
function GetAllData() {
$http.get('/Employee/GetEmployee').success(function (data) {
$scope.employees = data;
alert(data);
});
};
});
</script>
My requirement is to display HTML and Data during page load using ng-init in angular js
How to solve this
Regards
Baiju