In this article, we will create an ASP.NET MVC 4 Application, using AngularJS in Custom directive with multi check box. Previously, I created ASP.NET MVC 4 Application, using AngularJS, perform CRUD operations and Multi-Row Insert, using Web API. Let’s see.

Introduction

The link of my previous article is given below.

In this Angularcontroller folder in StudentViewcontroller.js, we will add custom directive for the child table information.

StudentViewcontroller.js (it is angular controller)

In JS file, we defined the custom directive.

  1. app.controller("StudentViewcontroller", function ($scope, RohitService, $location, ShareData, $window) {
  2. getdate();
  3. $scope.selectedRow = null; // initialize our variable to null
  4. function getdate() {
  5. var promisePost = RohitService.ShowStudent();
  6. promisePost.then(function (pl) {
  7. var stud = pl.data;
  8. $scope.student = stud;
  9. })
  10. }
  11. $scope.editEmployee = function (KeyId) {
  12. ShareData.KeyId = KeyId;
  13. var earl = "/studentRecord";
  14. $location.path(earl);
  15. }
  16. $scope.deleteEmployee = function (KeyId) {
  17. if ($window.confirm('Are you sure to delete ?')) {
  18. var promisePost = RohitService.deleteStudentKey(KeyId);
  19. promisePost.then(function (pl) {
  20. var stud = pl.data;
  21. alert('Your Record Deleted Successfully !');
  22. getdate();
  23. })
  24. }
  25. }
  27. $scope.selectEntity = function () {
  28. // If any entity is not checked, then uncheck the "allItemsSelected" checkbox
  29. for (var i = 0; i < $scope.student.length; i++) {
  30. if (!$scope.student[i].isChecked) {
  31. $scope.allItemsSelected = false;
  32. return;
  33. }
  34. }
  35. //If not the check the "allItemsSelected" checkbox
  36. $scope.allItemsSelected = true;
  37. };
  39. // This executes when checkbox in table header is checked
  40. $scope.selectAll = function () {
  41. for (var i = 0; i < $scope.student.length; i++) {
  42. $scope.student[i].isChecked = $scope.allItemsSelected;
  43. }
  44. };
  46. });
  48. //my custome directive for child table data infomation
  49. app.directive("myGetDirective", function (RohitService) {
  50. return {
  51. restrict: 'E',
  52. scope: {
  53. datasource: '='
  54. },
  55. link: function ($scope) {
  56. var index = $scope.$parent.$index;
  57. var id = $scope.$parent.student[index].KeyId;
  58. var promiseStudentRecord = RohitService.showEduStudent(id);
  59. promiseStudentRecord.then(function (pl) {
  60. var stud = pl.data;
  61. $scope.ClassModel = stud;
  62. },
  63. function (errorPl) {
  64. $scope.error = errorPl;
  65. });
  66. },
  67. templateUrl: "Home/View1"
  68. }
  69. });
View1.cshtml (it is View Folder)
  1. <div>
  2. <table>
  3. <tr>
  4. <td>
  5. Class
  6. </td>
  7. <td>
  8. Board
  9. </td>
  10. <td>
  11. Roll No.
  12. </td>
  13. </tr>
  14. <tr data-ng-repeat="cls in ClassModel">
  15. <td>
  16. {{cls.ClassName}}
  17. </td>
  18. <td>
  19. {{cls.BoardName}}
  20. </td>
  21. <td>
  22. {{cls.CRollNo}}
  23. </td>
  24. </tr>
  25. </table>
  26. </div>
StudentView.cshtml (it is View Folder)

In this view, we will add custom directive myGetDirective.
  1. @{
  2. ViewBag.Title = "Student View";
  3. }
  4. <h2>Student View</h2>
  6. <table id="testrohit">
  7. <tr>
  8. <thead>
  9. <td>
  10. <table>
  11. <tr>
  12. <th>
  13. <input type="checkbox" data-ng-model="allItemsSelected" data-ng-change="selectAll()">
  14. </th>
  15. <th>Student Name
  16. </th>
  17. <th>Father's Name
  18. </th>
  19. <th>Gender
  20. </th>
  21. <th>Mobile No.
  22. </th>
  23. <th>Action
  24. </th>
  25. </tr>
  26. </table>
  27. </td>
  28. </thead>
  29. </tr>
  30. <tr>
  31. <tbody data-ng-repeat="students in student" >
  32. <td>
  33. <table class="inner-table">
  34. <tr>
  35. <td width="10%">
  36. <input type="checkbox" data-ng-model="students.isChecked" data-ng-change="selectEntity()">
  37. </td>
  38. <td width="20%">{{students.SName | uppercase}}
  39. </td>
  40. <td width="20%">{{students.FName}}
  41. </td>
  42. <td width="20%">{{students.Gender}}
  43. </td>
  44. <td width="20%">{{students.MobileNo}}
  45. </td>
  46. <td width="10%">
  48. <span data-ng-click="toggleModal(students.KeyId)">View</span>
  50. <span data-ng-click="editEmployee(students.KeyId)">Edit</span>
  51. <span data-ng-click="deleteEmployee(students.KeyId)">Delete</span>
  52. </td>
  53. </tr>
  54. <tr>
  55. <td colspan="6">
  56. <div data-ng-if="students.isChecked">
  57. <my:get-directive datasource="ClassModel"></my:get-directive>
  58. </div>
  60. </td>
  61. </tr>
  62. </table>
  63. </td>
  64. </tbody>
  65. </tr>
  66. </table>
Now, update angularcontroller in js file, the view in studentview.cshtml and add view1.cshtml file, build your project and run it.

After running your Application, the output is given below.