In today's world, we need to display the data in tabular format with edit and delete functionality. For example, in ASP.NET we have Gridview control, which is more simple to achieve this. We have Edit data template and view template in ASP.NET Grid but these are heavy controls which takes time to render on UI.

As now a days world is moving on Angular, where we can make our UI design in a very efficient way. In my previous blog I have explained how to render data on UI with sorting and filtering.
http://findnerd.com/list/view/Data-Binding-Data-Filter-and-Sorting-in-Angular-JS-using-WEB-API/22626/

Today we discuss the edit and delete data in grid form. We include the getTemplate() using ng-include on ng-repeat directive and make two template Edit and Display in script type ng-template as below.

<tr ng-repeat="Emp in employees" ng-include="getTemplate(Emp)">                          
<script type="text/ng-template" id="display"> 
           <td> <span>{{Emp.Age}}</span></td>
           <td> <span>{{Emp.Name}}</span></td>
           <td> <span>{{Emp.Address}}</span>
           <td> <button type="button" ng-click="editEmployee(Emp)">Edit</button>
                <button type="button" ng-click="deleteEmployee(Emp)">Delete</button></span>
           </td>
</script>
<script type="text/ng-template" id="edit">
            <td><input type="text" ng-model="Emp.Age" class="form-control input-sm" /></td>
            <td><input type="text" ng-model="Emp.Name" class="form-control input-sm" /></td>
            <td><input type="text" ng-model="Emp.Address" class="form-control input-sm" /></td>
            <td>
                <button type="button" ng-click="updateEmployee(Emp)">Save</button>
                <button type="button" ng-click="reset()">Cancel</button>
            </td>
</script></tr>

initially we set $scoe.selected to blank and clicking on Edit button we set the employee object to $scope.selected.

    $scope.editEmployee = function (employees) {
        $scope.selected = angular.copy(employees);
    };

    $scope.selected = {};

    $scope.getTemplate = function (employee) {
        if (employee.ID === $scope.selected.ID) {
            return 'edit';
        }
        else return 'display';
    };

    $scope.reset = function () {
        $scope.selected = {};
    };

Here is the output :

On Save button, we call the WEB API with method: "put" in services and pass the data in JSON. On successful update, we refresh the UI and set  $scope.selected to blank and load the record again.

    $scope.updateEmployee = function (employees) {
        var promisePut = crudService.put(employees);
        promisePut.then(function (pl) {
            $scope.selected = {};
            $scope.Message = "Emp Updated successfully";
            loadRecords();
        }, function (err) {
            console.log("Err" + err);
        });
    };

    // Service
    this.put = function (updateEmployee) {
        var request = $http({
            method: "put",
            url: "/api/crud/updateEmployeeAPI",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: updateEmployee
        });
        return request;
    }