AngularJS Smart Table with Add, Edit and Delete Records

This is Part II of angularjs smart-table tutorial.This smart-table tutorial help to add, edit and delete records using rest api. I am using angularjs Bootstrap modal directive to show view record modal window,add record modal window and edit record modal window.

I am extending my previous tutorials AngularJS Smart Table Listing with pagination,sorting and searching and will add crud operation on existing source code.

I am using JSON data based rest api which will use for add record into smart-table, update record data into smart-table and delete record from database.I am using Dummy Rest API for testing purpose.You can also integrate this example code with your server side application.

AngularJS is most popular front-end JavaScript framework and smart-table is most customizable and awesome angularjs grid plugin.I will let know, how to add functionality in angularjs smart-table for add, edit and delete record.I am assuming you have read my previous tutorials.

Simple Example of Smart Table With Add, Edit and Delete Data

I will describe step by step implementation of smart-table with add, edit and delete record operation.There are many ways you can do that, You can use router to show add, edit html page or you can use inline editing in smart-table.I am using Bootstrap modal Box to show add, edit and view window with separate controller and html file.

I will use following files in this smart table tutorial,

1. index.html : This file will contain all HTML markup and initialize angularjs application.
2. app.js : This file will contain angularjs controllers code and scope methods.
3. view/view_record.html : This file will contain view record form.
4. view/add_record.html : This file will contain add record form.
5. view/update_record.html : This file will contain update record form.

Also Checkout other tutorials of angular grid,

How to Integrate Angularjs Bootstrap UI Modal Box

We will add bootstrap ui file in head section of index.html file, if you have already included please ignore.You can read more from Angular Bootstrap Modal Example Using Boostrap UI.

now we will add bootstrap ui dependency in angularjs application and inject it into app.js file.

next action will be, add action buttons with smart-table, so we will add following HTML into action column in table.

Above steps will integrate bootstrap Modal box and add actions link buttons against each row records in smart table.

How to inject modal in controller

We have included bootstrap UI in angularjs application but we need to include modal box directive in our application controller where to show modal box.We need to create a modalInstance variable and assigned null value.

How To add View Record in smart-table

We will show view record modal box on-click of view icons,I am passing row id that will use for fetch records and send data to view modal scope.

Step 1 : We will add a method on ng-click event, The view action HTML code will become like below,

Step 2 :crated view_record.html file and added below HTML code into this file.

Step 3 : We will define this method on testController and configure modal box parameters.

Above code Line #3 we have define HTTP request that will fetch record using API, Line #5 create modal instance and passed HTML file path ('view/view_record.html') and controller name('empViewCtrl') which will handle request.

At the last of method we have passed response.data object to modal controller.You can get this response data on empViewCtrl controller by accessing 'record' object.

Step 4 : Define 'empViewCtrl' controller and create init() method that will set record data into scope variable.

How To add New Record in smart-table

We will show add record modal box and user will fill all required data, finally we will call saveRecord() method that will parse JSON data and send Data to Rest API Method.I am refreshing smart-table grid data after the successfully inserted record in mysql db.

Step 1 : We will add new button to add record, we will bind ng-click event to show add modal window.

Step 2 : Created add_record.html file and added below HTML code into this file.

Step 3 : We will define addRecord() method on testController and configure modal box parameters.

Line #2 create modal instance and passed HTML file path ('view/add_record.html') and controller name('addEmpCtrl') which will handle request.

Step 4 : Define 'addEmpCtrl' controller and create saveEmp() method that will set validate input data, parse data and sent data to REST API Method.

How To Update Record in smart-table

This steps will demonstrate updation of record into table using REST API.I am refreshing smart-table grid data on successfully update record.

Step 1 :We will add a method on ng-click event that will show edit window.

Step 2 : Created update_record.html file and added below HTML code into this file.

Step 3 : We will define editRecord() method on testController and configure modal box parameters.

Line #5 create modal instance and passed HTML file path('view/add_record.html') and controller name('addEmpCtrl') which will handle request.

Step 4 : Define 'updateEmpCtrl' controller and create updateEmp () method that will set validate input data, parse data and sent data to REST API Method.The init() method use for set data into employee scope variable.

How To Delete Record in smart-table

This step will demonstrate deletion of record from the database table using REST API.I am refreshing smart-table grid data on successfully delete record.

Step 1 :We will add a method on ng-click event to delete record.We will pass record id as a parameters with in method.

Step 2 : We will define deletRecord() method on testController and configure modal box parameters.

I am using JavaScript confirm box to delete records, once user click on 'OK' option, we will fire ajax request to delete record from database.

You can download source code and Demo from below link.

Conclusion

This tutorial help to create basic crud operation on smart-table listing.You can add record, edit record, view data and delete record from database using REST API.I using PHP Rest API for all crud operation ,You can replace REST call as per your need.