Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Edit and Delete template in tabular data using Angular JS and WEB API

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 499
    Comment on it

    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;
        }

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: