Model-------------
public class Employee
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Country { get; set;
}
View......
<link
href="../../style/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../../script/angular.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('HomeCtrl',
['$scope', '$http', function ($scope, $http) {
$http({
method: 'POST',
url: 'Home/GetEmployees'
})
.then(function (response) {
console.log(response);
$scope.employees = response.data.employees;
angular.forEach($scope.employees, function (obj) {
obj["showEdit"] = true;
});
}, function (error) {
console.log(error);
});
$scope.toggleEdit = function
(emp) {
emp.showEdit = emp.showEdit ? false : true;
}
} ]);
</script>
<div
ng-app="myApp" ng-controller="HomeCtrl" class="container">
<div class="row">
<div class="bs-example
marginTop50"
data-example-id="table-within-panel">
<div class="panel
panel-default">
<div
class="panel-heading">
<h3>Code Handbook</h3></div>
<div
class="panel-body">
<p>
AngularJS ASP.NET MVC
Editable Grid Demo</p>
</div>
<table
class="table">
<thead>
<tr>
<th>
#
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Country
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in
employees">
<th scope="row">
{{$index+1}}
</th>
<td>
<span ng-show="emp.showEdit">{{emp.FirstName}}</span>
<input ng-show="!emp.showEdit" type="text" ng-model="emp.FirstName" class="form-control" >
</td>
<td>
<span ng-show="emp.showEdit">{{emp.LastName}}</span>
<input ng-show="!emp.showEdit" type="text" ng-model="emp.LastName" class="form-control" >
</td>
<td> <span ng-show="emp.showEdit">{{emp.Country}}</span>
<input ng-show="!emp.showEdit" type="text" ng-model="emp.Country" class="form-control" >
</td>
<td>
<span ng-show="emp.showEdit" ng-click="toggleEdit(emp)" class="glyphicon
glyphicon-pencil"></span>
<span ng-show="!emp.showEdit" ng-click="toggleEdit(emp)" class="glyphicon
glyphicon-ok"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Controller----
public JsonResult
GetEmployees()
{
List<Employee> empList = new List<Employee>();
Employee emp = new Employee { FirstName = "James", LastName = "Bond", Country = "Germany" };
empList.Add(emp);
emp = new Employee { FirstName = "Roy", LastName = "Agasthyan", Country = "United States" };
empList.Add(emp);
return Json(new { employees = empList });
}