editmode not working in angularjs

Posted by Klbaiju under AngularJS 1x on 9/11/2018 | Points: 10 | Views : 57 | Status : [Member] | Replies : 0
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




Responses

(No response found.)

Login to post response