How to work with modaldialog in angularjs

[Tejaswini]

Hi, 

I am using syncfusion modaldialog in my form. I have created user profile page and there is a link for 'edit profile' . Now, When i click on 'edit profile' link, i want to open syncfusion modaldialog which has fields for editing e.g. firstname, lastname, date of birth etc. I am working with angularjs. How can modaldialog for  editing user profile in angularjs?

[Tejaswini]

I have worked with modal in angularjs and want to replace angularjs modal with syncfusion dialogmodal. here is my code for angularjs modal,

ModalController.js

app.controller('ModalOpenController', function ($scope, $modal) {

    $scope.openEditEmployeeModal = function () {

        var modalInstance = $modal.open({

            templateUrl: '../view/employee/edit/EditEmployee.html',

            controller: 'EmployeeEditController',

           

            windowClass: 'center-modal',

            resolve: {

                items: function () {

                    return $scope.items;

                }

            }

        });

       

    };

});

EditEmployee.html

<form name="EmployeeForm" class="form-horizontal" role="form" ng-controller="EmployeeEditController">

  <div class="modal-header main_panel_header" style="padding-bottom:0px; padding-top:0px;" >

        <div class="row">

            <div class="col-md-8">

                <h5 style="padding: 5px;"><b>Edit Profile</b></h5>

            </div>

        </div>

    </div>

    <div class="modal-body" style="padding-bottom: 0px;padding-top: 10px;height:405px;">  

            

            <tabset>

                <tab heading="Basic">

                    <br />

                      <div ng-include="'../view/employee/create/BasicInformation.html'"></div>

                                        

                 </tab>

                 <tab heading="Contact">

                    <br />

                      <div ng-include="'../view/employee/create/ContactInformation.html'"></div>

                 </tab>

                 <tab heading="Other">

                    <br />

                      <div ng-include="'../view/employee/create/OtherInformation.html'"></div>

                </tab>

            </tabset>

       

    </div>

    <div class="align-save-cancel">

        <button  ej-button  e-size= "small" id='save_button' ng-click="update(employee);">Save</button>

        <button  ej-button  e-size= "small" ng-click="$close()">Cancel</button>

     </div>

</form>

Here, i included html pages for editing basic, contact and other information. and when the user clecks 'edit profile' button modal is opened which has three tabs one for editing  basic information, second one for editing contact details and third one for editing other details. I have displayed edited information on user detail page(view) using angularjs expressions. e.g.{{employee.firstname}}, {{employee.lastname}} etc. etc..

EmployeeEditController.js code is,

app.controller('EmployeeEditController', function ($scope, $localStorage, $filter, $modal, $location, EmployeeService) {

    $scope.employee =

    {

        firstname: "",

        lastname: "",

        gender: "",

        birthdate: "",

        address: "",

        city: "",

        pincode: "",

        mobileno: "",

        homephone: "",

        email: "",

        personalemail: "",

        bloodgroup: "",

        pancardno: "",

        passportno: "",

        emergencyname: "",

        contactno: ""

    };

    

    //array of bloodgroup

    $scope.d1 = $scope.employee.birthdate;

    $scope.regularize_status = [{ text: "Applied", value: "Applied" }, { text: "Discard", value: "Discard" }];

    $scope.bloodgroupList = ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-','O+', 'O-'];

   

    $scope.BloodGroup_List = $scope.bloodgroup;

    //Birth date format changed to 5 Feb 2012 using $filter

    $scope.changeformat = function () {

        $scope.employee.birthdate = $filter('date')($scope.employee.birthdate, "dd MMM yyyy");

    };

    $scope.phoneNumber = /^[789]\d{9}$/;

    //Get the username from login page

    $scope.UserName = "";

    var Login_Details = JSON.parse(localStorage.getItem('Login Details'));

    if (Login_Details != undefined && Login_Details != '') {

        $scope.UserName = Login_Details.username;

    }

    //Get the localstorage values for employee

    var list = JSON.parse(localStorage.getItem('employee'));

    if (list != undefined && list != '') {

        $scope.employee = list;

    }

    $scope.update = function (employee) {

        

        $scope.employee.firstname = employee.firstname;

        $scope.employee.lastname = employee.lastname;

        $scope.employee.gender = employee.gender;

        $scope.employee.birthdate = employee.birthdate;

        $scope.employee.address = employee.address;

        $scope.employee.city = employee.city;

        $scope.employee.pincode = employee.pincode;

        $scope.employee.mobileno = employee.mobileno;

        $scope.employee.homephone = employee.homephone;

        $scope.employee.email = employee.email;

        $scope.employee.personalemail = employee.personalemail;

        $scope.employee.bloodgroup = employee.bloodgroup;

        $scope.employee.pancardno = employee.pancardno;

        $scope.employee.passportno = employee.passportno;

        $scope.employee.emergencyname = employee.emergencyname;

        $scope.employee.contactno = employee.contactno;

        EmployeeService.setEmployee(employee); //employee object passed to EmployeeService

        localStorage.setItem('employee', JSON.stringify($scope.employee));//set the values in localstorage

    };

    

    //use $watch display edited employee properties to view without page refresh

    $scope.$watch(function () {

        var Employee = EmployeeService.Employee;

        if (Employee !== null) {

           

            $scope.employee = Employee;

        }

        return $scope.employee;

    });

    

});

How can implement the same using syncfusion dialog modal to edit user profile 

[Sasikala Nagarajan]

Hi Tejaswini,

Thanks for using Syncfusion products,

We have analyzed your code snippet. We have prepared the sample with model dialog based on your requirement (model dialog in angular js).

Please get the sample from below location

Sample

In this sample, we have defined the dialog area using ‘ng-include’ within ‘dialog_ctrl’. Please refer the below code snippet

<div id="basicDialog" ng-controller="dialog_ctrl">

     <form id="details">

       <div ng-include="'EditEmployee.html'"></div><br />

      <button type="submit" ej-button ng-click="update(username)">Update</button>

      <button type="button" ej-button ng-click="closeDialog()">Cancel</button>

      <button type="reset" ej-button >Clear all values</button>

      </form>

In Edit Employee html file we have included form fields from three different html pages(using ng-include). Please refer the below code snippet

<h3>Basic Info</h3>

    <div ng-include="'BasicInfo.html'"></div>

    <h3>Contact Info</h3>

    <div ng-include="'ContactInfo.html'"></div>

    <h3>Other Info</h3>

    <div ng-include="'OtherInfo.html'"></div>

In other controller(basic_controller) we have provided the one textbox to enter the user name (whose details we want to edit). Based on the given user name value, the details will be loaded in dialog’s form fields. In this we have used ‘$broadcast’ service to dispatch the function between two controllers.

Please refer the below code snippet.

$scope.dialogopen = function (user) {

                $("#basicDialog").ejDialog("open");

                $scope.$broadcast('getuserinfo',user);

            }

$scope.$on('getuserinfo', function (event,user) {

                        for (i = 0; i < $scope.employee.length; i++)

                            if ($scope.employee[i].username == user) {

                                $scope.username = $scope.employee[i].user;

                                $scope.fname = $scope.employee[i].fname;

                                $scope.lname = $scope.employee[i].lname;

                                $scope.gender = $scope.employee[i].gender;

                                $scope.dob = $scope.employee[i].dob;;

                                $scope.add = $scope.employee[i].add;

                                $scope.city = $scope.employee[i].city;

                                $scope.pin = $scope.employee[i].pin;

                                $scope.no = $scope.employee[i].no;

                                $scope.bloodgroup = $scope.employee[i].bloodgroup;

                                $scope.pancard = $scope.employee[i].pancard;

                                $scope.passport = $scope.employee[i].passport;

                            }

                    });

Also we have provide the three option (update, clear(reset),cancel) in dialog. Modified details will be updated in list (local data source) when we click the “update” button.

Please check with the given sample and let us know if you have further queries.

Regards,

Sasikala Nagarajan

[Tejaswini]

Hi Sasikala,

Thank you or your answer. I have worked with above sample. But, what i want here is,when i click on 'edit profile' button 'basic info, contact info, other details' should open in respective tabs in a modal. And after editing the fields, when i click on update button, the modal must be closed. How can i fix these problems?

Thank you.

[Sasikala Nagarajan]

HiTejaswini,

Thanks for the update

We have analyzed your requirement(when I click on 'edit profile' button 'basic info, contact info, other details' should open in respective tabs in a modal). We have achieved your requirement using our tab control.

In editemployee.html file we have included the other html files (basicinfo ,otherinfo, contactInfo) based on the tab Structure control.

Please refer the below code snippet

[editemployee.html]

<divid="Div1">

<ul>

<li><arel='nofollow' href="#BasicInfo">Basic Info</a></li>

<li><arel='nofollow' href="#ContactInfo">ContactInfo</a></li>

<li><arel='nofollow' href="#OtherInfo">OtherInfo</a></li>

</ul>

<divid="BasicInfo"ng-include="'BasicInfo.html'"></div>

<divid="ContactInfo"ng-include=" 'ContactInfo.html' "></div>

<divid="OtherInfo"ng-include=" 'OtherInfo.html' "></div>

</div>

While opening the dialog in home page we have create tab control. Please find the below code snippet

[script]

$scope.dialogopen =function(user) {

$("#basicDialog").ejDialog("open");

$("#tab").e​jTab();

$scope.$broadcast('getuserinfo', user);

}

For your convenience, we have modified the existing sample based on this. Please get the sample from below location.

Sample​

Please check with the given sample and let us know if you have further queries.

Regards,

Sasikala Nagarajan

[Tejaswini]

Hi Sasikala,

I worked with the solution given above. But the problem is when i click on 'edit profile' link only the empty modal is loaded. The html pages for Basic, contact and other information are not getting loaded. Here is my employee detail page in which there is link for 'edit profile'. 

In the employeeDeatail.html file i have written,

<div ng-controller="ModalOpenController">

            <input class="e-btn" e-size="small" type="button" ng-click="dialogopen()" value="Edit Profile" ej-button e-click="dialogOpen" />

</div>

      

<div id="basicDialog" ng-controller="EmployeeEditController">

               

                    <div ng-include="'../view/employee/edit/EditEmployee.html'"></div><br />

                                

</div>

EditEmployee.html

<div id="basicDialog">

    <div id="tab">

        <ul>

            <li><a rel='nofollow' href="#BasicInfo">Basic</a></li>

            <li><a rel='nofollow' href="#ContactInfo">Contact</a></li>

            <li><a rel='nofollow' href="#OtherInfo"> Other</a></li>

        </ul>

        <div id="BasicInfo" ng-include="'../view/employee/create/BasicInformation.html''"></div>

        <div id="ContactInfo" ng-include=" ../view/employee/create/ContactInformation.html' "></div>

        <div id="OtherInfo" ng-include=" '../view/employee/create/OtherInformation.html' "></div>

    </div>

    <div class="align-save-cancel">

        <button  ej-button  e-size= "small" ng-click="update(employee);">Save</button>

        <button  ej-button  e-size= "small" ng-click="cancel(employee)">Cancel</button>

      </div>

</div>

And I have written seperate controller for dialog open as,

app.controller('ModalOpenController', function ($scope, $modal, $rootScope) {

$(function () {

        $("#basicDialog").ejDialog({

            showOnInit: false,

            enableModal: true,

            open: "dialogopen",

            title: "Employee details",

        });

        $("#tab").ejTab();

       

        $scope.dialogopen = function (user) {

            $("#basicDialog").ejDialog("open");

            $("#tab").ejTab({ selectedItemIndex: 0 });

            $scope.$broadcast('getuserinfo');

        }

    });

And in the EditEmployeeController, I have written,

app.controller('EmployeeEditController', function ($scope, $localStorage, $rootScope, $filter, $modal, $location, EmployeeService) {

    $scope.employee =

    {

       

        firstname: "",

        lastname: "",

        gender: "",

        birthdate: "",

        address: "",

        city: "",

        pincode: "",

        mobileno: "",

        homephone: "",

        email: "",

        personalemail: "",

        bloodgroup: "",

        pancardno: "",

        passportno: "",

        emergencyname: "",

        contactno: ""

    };

    //$scope.firstname = "";

    //$scope.birthdate = "";

    //array of bloodgroup

    //$scope.$on('ProfileDialogOpen', function (event) {

    //    obj = $(".e-dialog.e-js").data("ejDialog");

    //    if (obj)

    //        obj.open();

    //});

   

    $scope.d1 = $scope.employee.birthdate;

    $scope.regularize_status = [{ text: "Applied", value: "Applied" }, { text: "Discard", value: "Discard" }];

    $scope.bloodgroupList = ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'];

    //$scope.bloodgroup = [{ Id: "1", value: "O+" },

    //                            { Id: "2", value: "O-" },

    //                            { Id: "3", value: "A+" },

    //                            { Id: "4", value: "A-" },

    //                            { Id: "5", value: "B+" },

    //                            { Id: "6", value: "B-" },

    //                            { Id: "7", value: "AB+" },

    //                            { Id: "8", value: "AB-" }];

    $scope.BloodGroup_List = $scope.bloodgroup;

    //Birth date format changed to 5 Feb 2012 using $filter

    $scope.changeformat = function () {

        $scope.employee.birthdate = $filter('date')($scope.employee.birthdate, "dd MMM yyyy");

    };

    $scope.phoneNumber = /^[789]\d{9}$/;

    //Get the username from login page

    $scope.UserName = "";

    var Login_Details = JSON.parse(localStorage.getItem('Login Details'));

    if (Login_Details != undefined && Login_Details != '') {

        $scope.UserName = Login_Details.username;

    }

    //Get the localstorage values for employee

    var list = JSON.parse(localStorage.getItem('employee'));

    if (list != undefined && list != '') {

        $scope.employee = list;

    }

    $scope.$on('getuserinfo', function (event) {

        for (i = 0; i < $scope.employee.length; i++)

            //if ($scope.employee[i].username == user) {

                $scope.employee.user = $scope.employee[i].username;

                $scope.employee.firstname = $scope.employee[i].firstname;

                //$scope.lname = $scope.employee[i].lname;

                //$scope.gender = $scope.employee[i].gender;

                //$scope.dob = $scope.employee[i].dob;;

                //$scope.add = $scope.employee[i].add;

                //$scope.city = $scope.employee[i].city;

                //$scope.pin = $scope.employee[i].pin;

                //$scope.no = $scope.employee[i].no;

                //$scope.bloodgroup = $scope.employee[i].bloodgroup;

                //$scope.pancard = $scope.employee[i].pancard;

                //$scope.passport = $scope.employee[i].passport;

            //}

    });

    $scope.update = function (employee) {

        

        $scope.employee.firstname = employee.firstname;

        $scope.employee.lastname = employee.lastname;

        $scope.employee.gender = employee.gender;

        $scope.employee.birthdate = employee.birthdate;

        $scope.employee.address = employee.address;

        $scope.employee.city = employee.city;

        $scope.employee.pincode = employee.pincode;

        $scope.employee.mobileno = employee.mobileno;

        $scope.employee.homephone = employee.homephone;

        $scope.employee.email = employee.email;

        $scope.employee.personalemail = employee.personalemail;

        $scope.employee.bloodgroup = employee.bloodgroup;

        $scope.employee.pancardno = employee.pancardno;

        $scope.employee.passportno = employee.passportno;

        $scope.employee.emergencyname = employee.emergencyname;

        $scope.employee.contactno = employee.contactno;

        EmployeeService.setEmployee(employee); //employee object passed to EmployeeService

        localStorage.setItem('employee', JSON.stringify($scope.employee));//set the values in localstorage

        

    };

    $scope.todate_close = function () {

        

    }

    //use $watch display edited employee properties to view without page refresh

    $scope.$watch(function () {

        var Employee = EmployeeService.Employee;

        if (Employee !== null) {

            

            $scope.employee = Employee;

        }

        return $scope.employee;

    });

    $scope.cancel=function()

    {

        $("#basicDialog").ejDialog("close");

    }

    

});

I am working with angularjs. Where am I wrong in above code. how can i open the dialog for 'edit profile' which has three tabs for basic, contact and other information.? How can i fix it?

Thank you.

[Sasikala Nagarajan]

Hi Tejaswini,

We have analyzed your query (when i click on 'edit profile' link only the empty modal is loaded). We have created sample based on your requirement. We are unable to reproduce the reported issue. The html pages (included using ng-include) loaded correctly.

Please find the sample from location:

sample

In this sample we have used local data for form fields. Also we have used factory function to call the one controller’s function from another controller (instead of using $broadcast service to call another controller function). Please refer the below code snippet.

[script]

myApp.factory("UserService", function ()

{

var UserService = {

getuser: function (localdata,user) {

angular.element('#basicDialog').scope().getuserinfo(localdata,user);

},

}

return UserService;

});

Please check the given sample comparing with your project and let us know if it helps. If still you are facing the problem, please revert us with replication procedure. So that we can provide you with a better solution.

Regards,

Sasikala Nagarajan