Display html and data on pageload in mvc using angular js

Posted by Klbaiju under AngularJS on 5/21/2017 | Points: 10 | Views : 161 | Status : [Member] | Replies : 0
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




Responses

(No response found.)

Login to post response