Hi,
I want to edit a row in an html table using angularjs
following is my html code
<div ng-app="MyApp" class="container" ng-controller="Book">
<div ng-init="GetAllData()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Company</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@*<tr ng-repeat="Emp in employees">*@
<tr ng-repeat="item in employees">
<td>
<span>{{item.Id}}</span>
@*<input type="text" ng-show="editMode" ng-model="item.id" />*@
</td>
<td>
<span ng-hide="editMode">{{item.FirstName}}</span>
<input type="text" ng-show="editMode" ng-model="item.FirstName" />
</td>
<td>
<span ng-hide="editMode">{{item.LastName}}</span>
<input type="text" ng-show="editMode" ng-model="item.LastName" />
</td>
<td>
<span ng-hide="editMode">{{item.Company}}</span>
<input type="text" ng-show="editMode" ng-model="item.Company" />
</td>
<td>
<i ng-hide="editMode" ng-click=" editItem(item,$index)" class="glyphicon glyphicon-edit"></i>
<i class="glyphicon glyphicon-saved" ng-show="editMode" ng-click="Update(item,$index);editMode = false"></i>
</td>
<td>
<i ng-click="removeItem($index)" class="glyphicon glyphicon-trash"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
and my javascript is as follows
<script src="~/Scripts/angular.min.js"></script><script>
var app = angular.module('MyApp', []);
app.controller("Book", function ($scope, $http) {
$scope.GetAllData = function () {
$http.get('/api/employee').then(function (response) {
$scope.employees = response.data
}, function (status) {
alert(status);
});
}
$scope.items = [];
$scope.editItem = function (item,index) {
$scope.fields[index].editMode = true;
}
$scope.Update = function (item,index) {
$http.put('/api/Employee', item).then(function (data) {
$scope.fields[index].editMode = false;
})
}
});
</script>
Error in my application is when I press edit button editmode not becomes true.
$scope.editItem = function (item,index) { $scope.fields[index].editMode = true; }
above code is not working
after updation I want to set the editmode false
that is also not working
following is the code
$scope.Update = function