Remove the web.config file and add an html page. To use angular js, we will add reference to online angular js script file on the following link.
Bind the AddData method to our button using ng-click angular directive. To display the data, we use the ng-repeat directive which will read the data from the array and generate an html table. So our html form will look like the following:
Now, run the application and see the data get's added.
Now let's delete the record from the table. Add a function for deletion in the controller. So our controller code will change to the following:
The argument of this function is of type EmpModel and will contain the data of the record which we are going to delete. We will find index of the record and remove it from the array. Next bind the delete button click event with our delete function using ng-click and pass the EmpModel instance as the parameter. See the code below:
Run the code, add new records and try to delete them.
Now, let's perform the update. First will display the data to be updated, in our input controls. Add a new method named BindSelectedData in our controller, which will pass the data to the input controls, using the $scope.EmpModel. Our function will look like the following:
To use the above method, bind it to the table row click using ng-click directive. Our html will change to:
Select rows from the table and see that the data get's bind to the input controls through the $scope.EmpModel, which get;s the data from the emp object(argument of the BindSelectedData method). See the screenshot below:
Our method will find the record in our array and perform it's updation. Attach our method with the click event of our update button by using the ng-click directive. So html mark-up will change to:
Run the application, edit and record and click the Update button..